选中复选框以选择所有基础chechbox JavaScript

时间：2017-04-04 13:23:14

标签： javascript checkbox 

<input type="checkbox" id="test1" />Check all A
<p id="test1">
<input type="checkbox" class="checkBoxClass" id="testA1" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA2" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA3" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA4" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA5" />A
    <br />
</p>
<input type="checkbox" id="test2" />Check all B
<p id="test2">
    <input type="checkbox" class="checkBoxClass" name="test" id="testB1" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB2" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB3" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB4" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB5" />B
    <br />
</p>
<input type="checkbox" id="test3" />Check all C
<p id="test3">
    <input type="checkbox" class="checkBoxClass" name="test" id="testC1" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC2" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC3" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC4" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC5" />C
    <br />
</p>

我有3个复选框，每个复选框底层5个。如果我检查全部A，则应选择所有基础复选框。 同样的事情应该发生在另一个检查所有B和检查所有C被选中。如果我必须撤消检查所有A，B和C中的任何一个 底层的框应该取消选中。我怎么用html做的？它似乎需要一个JavaScript但我不知道从哪里开始。还有一件事，如果我撤消检查所有 ，不应取消选中所有基础复选框。 希望任何人都可以帮助我。

3 个答案:

答案 0 :(得分：1)

我重命名了checkAll并给了他们一个班级

Plain JS，因为你没有标记jQuery - 向下滚动jQuery版本

window.onload = function() {
  var chkAll = document.querySelectorAll(".chkAll");
  for (var i = 0; i < chkAll.length; i++) {
    chkAll[i].onclick = function() {
      var id = this.id, chk = this.checked;
      var subChk = document.querySelectorAll("[id^=" + id + "]"); // starts with id
      for (var i = 0; i < subChk.length; i++) {
        subChk[i].checked = chk;
      }
    }
  }
}
<input type="checkbox" id="testA" class="chkAll" />Check all A
<p id="test1">
  <input type="checkbox" class="checkBoxClass" id="testA1" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA2" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA3" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA4" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA5" />A
  <br />
</p>
<input type="checkbox" id="testB" class="chkAll" />Check all B
<p id="test2">
  <input type="checkbox" class="checkBoxClass" name="test" id="testB1" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB2" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB3" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB4" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB5" />B
  <br />
</p>
<input type="checkbox" id="testC" class="chkAll" />Check all C
<p id="test3">
  <input type="checkbox" class="checkBoxClass" name="test" id="testC1" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC2" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC3" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC4" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC5" />C
  <br />
</p>

jQuery - 包括切换父复选框（如果有任何未选中或全部选中）

$(function() {
  $(".chkAll").on("click", function() {
    var id = this.id, chk = this.checked;
    $("[id^=" + id + "]").prop("checked", chk);
  });
  $(".checkBoxClass").on("click", function() {
    var chk = $(this).parent().find(".checkBoxClass").length == $(this).parent().find(".checkBoxClass:checked").length;
    $(this).parent().prev().prop("checked", chk);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="testA" class="chkAll" />Check all A
<p id="test1">
  <input type="checkbox" class="checkBoxClass" id="testA1" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA2" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA3" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA4" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA5" />A
  <br />
</p>
<input type="checkbox" id="testB" class="chkAll" />Check all B
<p id="test2">
  <input type="checkbox" class="checkBoxClass" name="test" id="testB1" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB2" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB3" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB4" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB5" />B
  <br />
</p>
<input type="checkbox" id="testC" class="chkAll" />Check all C
<p id="test3">
  <input type="checkbox" class="checkBoxClass" name="test" id="testC1" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC2" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC3" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC4" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC5" />C
  <br />
</p>

答案 1 :(得分：0)

您可以尝试这样的事情：

$(".full").on('change', function(e) {
  var checked = $(this).prop('checked');
  console.log(checked);
  $(this).next('p').find('input').each(function(i, e) {
    if (checked) {
      $(this).prop('checked', 'checked');
    } else {
      $(this).prop('checked', '');
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="full" id="test1" />Check all A
<p id="test1">
  <input type="checkbox" class="checkBoxClass" id="testA1" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA2" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA3" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA4" />A
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testA5" />A
  <br />
</p>
<input type="checkbox" class="full" id="test2" />Check all B
<p id="test2">
  <input type="checkbox" class="checkBoxClass" name="test" id="testB1" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB2" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB3" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB4" />B
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testB5" />B
  <br />
</p>
<input type="checkbox" class="full" id="test3" />Check all C
<p id="test3">
  <input type="checkbox" class="checkBoxClass" name="test" id="testC1" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC2" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC3" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC4" />C
  <br />
  <input type="checkbox" class="checkBoxClass" name="test" id="testC5" />C
  <br />
</p>

答案 2 :(得分：0)

这应该有效，我们可以使用jQuery，

＆＃13;
＆＃13; 
$("#test1").change(function(){  //"select all" change
    var status = this.checked; // "select all" checked status
    $('#test1 .checkBoxClass').each(function(){ //iterate all listed checkbox items
        this.checked = status; //change ".checkbox" checked status
    });
});

$("#test2").change(function(){  //"select all" change
    var status = this.checked; // "select all" checked status
    $('#test2 .checkBoxClass').each(function(){ //iterate all listed checkbox items
        this.checked = status; //change ".checkbox" checked status
    });
});

$("#test3").change(function(){  //"select all" change
    var status = this.checked; // "select all" checked status
    $('#test3 .checkBoxClass').each(function(){ //iterate all listed checkbox items
        this.checked = status; //change ".checkbox" checked status
    });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="test1" />Check all A
<p id="test1">
<input type="checkbox" class="checkBoxClass" id="testA1" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA2" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA3" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA4" />A
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testA5" />A
    <br />
</p>
<input type="checkbox" id="test2" />Check all B
<p id="test2">
    <input type="checkbox" class="checkBoxClass" name="test" id="testB1" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB2" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB3" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB4" />B
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testB5" />B
    <br />
</p>
<input type="checkbox" id="test3" />Check all C
<p id="test3">
    <input type="checkbox" class="checkBoxClass" name="test" id="testC1" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC2" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC3" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC4" />C
    <br />
    <input type="checkbox" class="checkBoxClass" name="test" id="testC5" />C
    <br />
</p>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题