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>

 js获取选中的值

var arr = [];
$(".likes input:checkbox[name='like']:checked").each(function(i){
   arr.push($(this).val());
});
console.log('-----选中的值-----', arr);

//第二种方式

for (var i = 0; i < obj.length; i++) {
if (obj[i].checked) {
demand += obj[i].value + ',';//如果选中,将value添加到变量s中
}
}

 

posted @ 2020-08-19 15:02  it写代码  阅读(583)  评论(0编辑  收藏  举报