• jQuery实现的全选、反选和不选功能


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <ul id="list">
            <li>
                <label>
                    <input type="checkbox" value="1"> 1.时间都去哪儿了</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="2"> 2.海阔天空</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="3"> 3.真的爱你</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="4"> 4.不再犹豫</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="5"> 5.光辉岁月</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="6"> 6.喜欢妳</label>
            </li>
        </ul>
        <input type="checkbox" id="all">
        <input type="button" value="全选" class="btn" id="selectAll">
        <input type="button" value="全不选" class="btn" id="unSelect">
        <input type="button" value="反选" class="btn" id="reverse">
        <input type="button" value="获得选中的所有值" class="btn" id="getValue">
        <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script>
        $(function() {
            //全选或全不选
            $("#all").click(function() {
                if (this.checked) {
                    $("#list :checkbox").prop("checked", true);
                } else {
                    $("#list :checkbox").prop("checked", false);
                }
            });
            //全选  
            $("#selectAll").click(function() {
                $("#list :checkbox,#all").prop("checked", true);
            });
            //全不选
            $("#unSelect").click(function() {
                $("#list :checkbox,#all").prop("checked", false);
            });
            //反选 
            $("#reverse").click(function() {
                $("#list :checkbox").each(function() {
                    $(this).prop("checked", !$(this).prop("checked"));
                });
                allchk();
            });
    
            //设置全选复选框
            $("#list :checkbox").click(function() {
                allchk();
            });
    
            //获取选中选项的值
            $("#getValue").click(function() {
                var valArr = new Array;
                $("#list :checkbox:checked").each(function(i) {
                    valArr[i] = $(this).val();
                });
                var vals = valArr.join(',');
                alert(vals);
            });
        });
    
        function allchk() {
            var chknum = $("#list :checkbox").size(); //选项总个数
            var chk = 0;
            $("#list :checkbox").each(function() {
                if ($(this).prop("checked") == true) {
                    chk++;
                }
            });
            if (chknum == chk) { //全选
                $("#all").prop("checked", true);
            } else { //不全选
                $("#all").prop("checked", false);
            }
        }
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    《学习之道》第六章习惯的部分-信号
    《学习之道》第六章习惯的组成
    《学习之道》第六章习惯的形成
    《学习之道》第五章小恶魔造成拖延(二)
    《学习之道》第五章拖延的两个小案例
    《学习之道》第五章是借口造成拖延(一)
    《学习之道》第五章认识拖延
    《学习之道》第五章认识“小恶魔”
    《学习之道》第五章分心与拖延
    redis 安装
  • 原文地址:https://www.cnblogs.com/Byme/p/8257992.html
Copyright © 2020-2023  润新知