zoukankan      html  css  js  c++  java
  • 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多选/全选/反选 获取选中的值</title>
    </head>
    <body>
        <p>中国古代十大名剑</p>
        <input type="checkbox" value="全选" id="selectAll"/>全选
        <div id="checkBoxList" class="check-all">  
            <input type="checkbox" value="轩辕"/>轩辕<br>  
            <input type="checkbox" value="湛泸"/>湛泸<br>  
            <input type="checkbox" value="赤霄"/>赤霄<br>  
            <input type="checkbox" value="太阿"/>太阿<br>  
            <input type="checkbox" value="七星龙渊"/>七星龙渊<br>  
            <input type="checkbox" value="干将"/>干将<br>  
            <input type="checkbox" value="莫邪"/>莫邪<br>  
            <input type="checkbox" value="鱼肠"/>鱼肠<br>  
            <input type="checkbox" value="纯钧"/>纯钧<br>  
            <input type="checkbox" value="承影"/>承影<br>  
        </div>  
        
        <button id="getCheckVal">获取选中的值</button>
    
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            $(function(){
                $("#selectAll").click(function(){ //全选/反选
                    var checkedFlag = this.checked;
                    $("#checkBoxList :checkbox").prop("checked", checkedFlag);
                }); 
    
                $("#checkBoxList :checkbox").click(function(){
                    var length1 = $("#checkBoxList :checkbox").length; //选项个数
                    var length2 = $("#checkBoxList :checkbox").filter(":checked").length; //已勾选的个数
                    if(length1 === length2){
                        $("#selectAll").prop("checked", true);
                    }else{
                        $("#selectAll").prop("checked", false);
                    }
                });
    
                $("#getCheckVal").click(function(){ //获取选中的值
                    $("#checkBoxList input:checkbox:checked").each(function(){
                        console.log($(this).val());
                    })
                })
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    大话领域驱动
    c#之循环效率
    编程思想之——"人是活的,程序是死的"
    C#之系统异常处理机制
    EF操作扩展之async
    C#提供APP接口之JSON差异
    EF操作MySql
    WCF 消息压缩性能问题及解决方法
    [NoSQL]-Elasticsearch 7.9
    [Linux]-Debian10基础使用
  • 原文地址:https://www.cnblogs.com/muou2125/p/9212433.html
Copyright © 2011-2022 走看看