jq 實現全選反選
阿新 • • 發佈:2020-08-19
$(function () { //實現全選反選 $("#chk_all_normal").on('click', function () { $("input[name='chk_list_normal']").prop("checked", $(this).prop('checked')); }) $("input[name='chk_list_normal']").on('click', function () { //當選中的長度等於checkbox的長度的時候,就讓控制全選反選的checkbox設定為選中,否則就為未選中 if ($("input[name='chk_list_normal']").length === $("input[name='chk_list_normal']:checked").length) { $("#chk_all_normal").prop("checked", true); } else { $("#chk_all_normal").prop("checked", false); } }) //一般專案實現全選 //實現全選反選 $("#chk_all").on('click', function () { $("input[name='chk_list']").prop("checked", $(this).prop('checked')); }) $("input[name='chk_list']").on('click', function () { //當選中的長度等於checkbox的長度的時候,就讓控制全選反選的checkbox設定為選中,否則就為未選中 if ($("input[name='chk_list']").length === $("input[name='chk_list']:checked").length) { $("#chk_all").prop("checked", true); } else { $("#chk_all").prop("checked", false); } }) })
<div class="row "> <div class="col"> <label>主控專案:</label> </div> </div> <div class="row "> <div class="col"> <ul class="list-group"> <li class="list-group-item"> <input type="checkbox" name="chk_list"class="form-check-input">1地基承載力</li> <li class="list-group-item"><input type="checkbox" name="chk_list" class="form-check-input">2配合比</li> <li class="list-group-item"><input type="checkbox" name="chk_list" class="form-check-input">3壓實係數</li> <li class="list-group-item"><input type="checkbox" name="chk_all" id="chk_all" class="form-check-input">全選</li> </ul> </div> </div> <div class="row"> <div class="col"> <label>一般專案:</label> </div> </div> <div class="row "> <div class="col"> <ul class="list-group"> <li class="list-group-item"> <input type="checkbox" name="chk_list_normal" class="form-check-input">1石灰粒徑(mm)</li> <li class="list-group-item"><input type="checkbox" name="chk_list_normal" class="form-check-input">2土料有機含量(%)</li> <li class="list-group-item"><input type="checkbox" name="chk_list_normal" class="form-check-input">3土顆粒粒</li> <li class="list-group-item"><input type="checkbox" name="chk_all_normal" id="chk_all_normal" class="form-check-input">全選</li> </ul> </div> </div>