1. 程式人生 > 實用技巧 >jq 實現全選反選

jq 實現全選反選

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