如何检查所有复选框根据与jQuery的每个子输入

问题描述:

我一直在出汗这个问题整天,我还没有找到任何网上匹配我的需要。如何检查所有复选框根据与jQuery的每个子输入

我有一个复选框HTML表单如下:

<input type="checkbox" name="classes[]" value="1" />JSS1 <br> 
    <input type="checkbox" name="subclasses[]" value="2" />Art <br> 
    <input type="checkbox" name="subclasses[]" value="1" />Science <br> 
    <input type="checkbox" name="classes[]" value="2" />JSS2 <br> 
    <input type="checkbox" name="subclasses[]" value="1" />A <br> 
    <input type="checkbox" name="subclasses[]" value="2" />B <br> 

现在,我想如果我检查类(比方说JSS1)所有子类下JSS1(艺术,科学),将被检查依此类推。

我该如何用jQuery做到这一点?

+0

请所有的投入都在一个循环。谢谢 –

+2

这不是一个代码写入服务。你到目前为止尝试了什么?发布您的代码!当你运行它时发生了什么?你预期会发生什么?你有什么特别的问题? https://*.com/help/mcve – Robert

请参考fiddle。使用此:

JS:

$(document).ready(function() { 
     $("input[name^='classes']").click(function() { 
      if ($(this).is(':checked')) { 
       $(this).siblings("input[name^='subclasses']").prop("checked", true); 
      } 
      else { 
       $(this).siblings("input[name^='subclasses']").prop("checked", false); 
      } 
     }); 

    }); 

HTML:

<div> 
    <input type="checkbox" name="classes[]" value="1" />JSS1 <br> 
    <input type="checkbox" name="subclasses[]" value="2" />Art <br> 
    <input type="checkbox" name="subclasses[]" value="1" />Science <br> 
</div> 
<div> 
    <input type="checkbox" name="classes[]" value="2" />JSS2 <br> 
    <input type="checkbox" name="subclasses[]" value="1" />A <br> 
    <input type="checkbox" name="subclasses[]" value="2" />B <br> 
</div> 
+0

Yaaaaaah!像魅力一样工作。非常感谢@vispan。 –

+0

但是如何取消选中父类,如果它的某个子类是未选中的? –

+0

我已经解决了:$(this).siblings(“input [name^='classes']”)。prop(“checked”,false); –