選擇復選框以選擇所有基礎的chechbox JavaScript

Question

 <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，但我不知道從哪里開始。還有一件事，如果我撤消了全部檢查，則所有基礎復選框都不應取消選中。 希望任何人都可以在這里幫助我。

Answer 1

我重命名了checkAll並給他們上了一堂課

普通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> 

Answer 2

您可以嘗試這樣的事情：

 $(".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> 

Answer 3

這應該可行，我們可以使用jQuery，

 $("#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 }); }); 

 <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>