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

Question

我有一个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中的项目？

谢谢阅读

Answer 1

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

 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> 

Answer 2

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

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

Answer 3

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

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