使用JavaScript隐藏复选框时，请取消选中该复选框

Make a checkbox unchecked when it is hidden using JavaScript

本文关键字：复选框 取消 JavaScript 隐藏 使用      更新时间：2023-09-26

我有一个JavaScript函数用于多项选择题测验：

如果答案是"是"-（复选框选中）-则会出现子问题，但如果用户单击"否"，则不会出现子问题。

JavaScript

   $(document).ready(function() {
  var par = $('#SQ1');
  $(par).hide();
  $('#Q1').click(function(e) {
      $(par).slideToggle('slow');
  });
});
    $(document).ready(function(){
      $('#Q1NO').click(function(){
         $('#SQ1').hide('slow');
      });
   })

问题复选框

<div>
    <input type="checkbox" id="Q1" name="chk[]" value="Yes">&nbsp;Yes</input>
<br>
    <input type="checkbox" id="Q1NO" name="chk[]" value="No">&nbsp;No</input>
</div>

子问题复选框

  <div id="SQ1">
<div>
    <input type="checkbox" name="chk[]" value="Yes 2" id="Q1R">&nbsp;Yes</input>
<br>
    <input type="checkbox" name="chk[]" value="No 2">&nbsp;No</input>
</div>
</div>

我正在将复选框中的值输入到数据库中，问题是，如果用户单击"是"，然后从子问题中选择一个框，但随后改变主意，在主问题上单击"否"，子问题将消失，但框仍在其中选中，并被添加到数据库中——这是我不想要的。

有没有一种方法可以在第一个div中单击"否"时取消选中div中的项目？

感谢阅读

取消选中所有子问题复选框：

$('#Q1NO').click(function(){
     $('#SQ1').hide('slow')
     .find('input:checkbox').prop('checked',false);
});

首先，应该有"是/否"单选按钮，或者只有一个复选框。有几种方法可以满足您的要求。我在下面发布了最简单的一个。看看它是否有帮助。

function showHideSub(isChecked){
if(isChecked)
{
$("#sub").show()
}
else
{
$("#sub").hide()
$("#sub input[type=checkbox]").removeAttr("checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <input type="checkbox" id="Q1" name="chk[]" onclick="showHideSub(this.checked)" value="Yes">&nbsp;Yes / No </input>
<br>
   
</div>
<div id="sub" style="display:none">
    <input type="checkbox" name="chk[]" value="Yes 2" id="Q1R">&nbsp;Yes/No</input>
</div>

无循环的解决方案，因为您可以设置所有查询匹配的属性。

 $('#Q1NO').click(function() {
    par.hide('slow');
    par.find("input[type=checkbox]").prop('checked', false);
  });
相关文章：