• 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中
    }
    }

  • 相关阅读:
    Java实时读取日志文件
    Trie树的应用:查询IP地址的ISP
    vue.extend,mixins和vue.component的区别
    前端性能优化10个方面
    vue组件和插件是实现
    vue指令用法
    promise retry实现
    linux管道与重定向
    linux文件颜色与类型
    linux文件权限说明
  • 原文地址:https://www.cnblogs.com/njccqx/p/13529445.html
Copyright © 2020-2023  润新知