zoukankan      html  css  js  c++  java
  • 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中
    }
    }

  • 相关阅读:
    c#实现windows远程桌面连接程序
    基于.NET平台常用的框架整理
    c#无限循环线程如何正确退出
    c# 内存的具体表现- 通用类型系统 深拷贝 浅拷贝 函数传参
    coco2d-x convertToWorldSpace介绍
    Effective C++条款20:宁以pass-by-reference-to-const替换pass-by-value。Test code
    函数指针与指针函数返回值的区别
    游戏开发那些事
    lua 根据指定字符拆分table字符串(转载)
    实习和学习的双重压力
  • 原文地址:https://www.cnblogs.com/njccqx/p/13529445.html
Copyright © 2011-2022 走看看