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);
  });

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

3 个答案: