選擇複選框以選擇所有底層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個每個複選框底層。如果我選中All 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>