使用父ID - jQuery选择所有子复选框

Question

当我点击parent 1 check all按钮时，应根据父ID选择所有孩子。我有更多的父母，每个父母都有个人身份证。我该怎么做。我尝试了一些不起作用的代码。有人帮我这个。谢谢。

<div>
  <input type="checkbox" id="choice_5621_1"> Parent 1 check all
  <br />
  <input type="checkbox" id="choice_5621_1_1"> <br />
  <input type="checkbox" id="choice_5621_1_2"> <br />
  <input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
  <input type="checkbox" id="choice_5621_2"> Parent 2 check all <br />
  <input type="checkbox" id="choice_5621_2_1"> <br />
  <input type="checkbox" id="choice_5621_2_2"> <br />
  <input type="checkbox" id="choice_5621_2_3">
</div>

Answer 1

由于您已将所有输入包装在div中，因此可以使用.nextAll()

＆＃13;

＆＃13;

// I gave the parent a checkall class just for demo cos not sure what your initial selector is:
$('.checkall').on('change', function() {
   $(this).nextAll('input').prop('checked', this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all
  <br />
  <input type="checkbox" id="choice_5621_1_1"> <br />
  <input type="checkbox" id="choice_5621_1_2"> <br />
  <input type="checkbox" id="choice_5621_1_3">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是解决方案

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<ul>
    <li>
        <input type="checkbox" name="choice_5621_1"> Parent 1 check all</input>
        <ul>
            <li><input type="checkbox" name="choice_5621_1_1">Child 1</input></li>
            <li><input type="checkbox" name="choice_5621_1_2">Child 1</input></li>
            <li><input type="checkbox" name="choice_5621_1_3">Child 1</input></li>
            <li><input type="checkbox" name="choice_5621_1_4">Child 1</input></li>                    
        </ul>
    </li>
    <li>
        <input type="checkbox" name="choice_5621_2">  Parent 2 check all </input>
        <ul>
            <li><input type="checkbox" name="choice_5621_2_1">Child 2</input></li>
            <li><input type="checkbox" name="choice_5621_2_2">Child 2</input></li>
            <li><input type="checkbox" name="choice_5621_2_3">Child 2</input></li>
            <li><input type="checkbox" name="choice_5621_2_4">Child 2</input></li>                    
        </ul>
    </li>
</ul>

<script>
$(document).ready(function () {
    $('input[name="choice_5621_1"]').bind('click', function () {
        $('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
    });
    $('input[name="choice_5621_2"]').bind('click', function () {
        $('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
    });
});
</script>

Answer 3

我猜您需要使用the attribute starts with selector，如下所示：

<plugin>
  <groupId>net.alchim31.maven</groupId>
  <artifactId>scala-maven-plugin</artifactId>
  <executions>
    <execution>
      <goals>
        <goal>compile</goal>
        <goal>testCompile</goal>
      </goals>
    </execution>
    <execution>
      <id>attach-javadocs</id>
      <goals>
        <goal>doc-jar</goal>
      </goals>
    </execution>
  </executions>
  <configuration>
    <sourceDir>src/main/scala</sourceDir>
    <jvmArgs>
      <jvmArg>-Xms64m</jvmArg>
      <jvmArg>-Xmx1024m</jvmArg>
    </jvmArgs>
  </configuration>

Answer 4

您可以使用jQuery的siblings选择器，并选择同一级别的所有复选框。

$('.checkall').on('click', function() {
   $(this).siblings('input').prop('checked', this.checked);
});

//Also making sure if any of the level2 checkbox is unchecked, then uncheck the main checkbox too.

$('.level2').on('click', function() {
   $(this).siblings('.checkall').prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all
  <br />
  <input type="checkbox" id="choice_5621_1_1" class="level2"> <br />
  <input type="checkbox" id="choice_5621_1_2" class="level2"> <br />
  <input type="checkbox" id="choice_5621_1_3" class="level2">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2" class="checkall"> Parent 2 check all 
<br />
  <input type="checkbox" id="choice_5621_2_1" class="level2"><br />
  <input type="checkbox" id="choice_5621_2_2" class="level2"><br />
  <input type="checkbox" id="choice_5621_2_3" class="level2">
</div>

Answer 5

给定一个表示一组DOM元素的jQuery对象，.closest()方法在DOM树中搜索这些元素及其祖先，并从匹配元素构造一个新的jQuery对象。 .parents()和.closest()方法类似，因为它们都遍历DOM树

＆＃13;

＆＃13;

$("#choice_5621_2 , #choice_5621_1").on("click",function(){
  $(this).closest("div" ).find("input[type='checkbox']").not($(this)).prop("checked",$(this).is(":checked"));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="choice_5621_1"> Parent 1 check all
  <br />
  <input type="checkbox" id="choice_5621_1_1"> <br />
  <input type="checkbox" id="choice_5621_1_2"> <br />
  <input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
  <input type="checkbox" id="choice_5621_2"> Parent 2 check all <br />
  <input type="checkbox" id="choice_5621_2_1"> <br />
  <input type="checkbox" id="choice_5621_2_2"> <br />
  <input type="checkbox"  id="choice_5621_2_3">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

$(document).ready(function() {
  $(".parent").on("click", function(){
    $(this).parent().find(":checkbox").prop('checked', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="choice_5621_1" class="parent"> Parent 1 check all
  <br />
  <input type="checkbox" id="choice_5621_1_1"> <br />
  <input type="checkbox" id="choice_5621_1_2"> <br />
  <input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
  <input type="checkbox" id="choice_5621_2" class="parent"> Parent 2 check all <br />
  <input type="checkbox" id="choice_5621_2_1"> <br />
  <input type="checkbox" id="choice_5621_2_2"> <br />
  <input type="checkbox" id="choice_5621_2_3">
</div>

但也许你应该切换它们。

编辑切换，就像Pete的回答一样！并像我一样使用nextall而不是parent。