• 全选、反选和不选


    html部分:

    <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">

     js部分:(此处需要引入jquery.js)

    <script>
    
        $(function () {
            //全选或全不选
            $("#all").click(function(){
                if(this.checked){
                    $("#list :checkbox").attr("checked", true);
                }else{
                    $("#list :checkbox").attr("checked", false);
                }
            });
            //全选
            $("#selectAll").click(function () {
                $("#list :checkbox,#all").attr("checked", true);
            });
            //全不选
            $("#unSelect").click(function () {
                $("#list :checkbox,#all").attr("checked", false);
            });
            //反选
            $("#reverse").click(function () {
                $("#list :checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("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).attr("checked")==true){
                    chk++;
                }
            });
            if(chknum==chk){//全选
                $("#all").attr("checked",true);
            }else{//不全选
                $("#all").attr("checked",false);
            }
        }
    </script>
  • 相关阅读:
    ubuntu删除django和安装django
    linux shell 统计文件单词出现次数
    linux shell $$、$!特殊符号
    linux安装zabbix需要php两个模块php-bcmach与php-mbstring
    linux 源码编译与卸载
    Job for dhcpd.service failed because the control process exited with error code. See "systemctl status dhcpd.service" and "journalctl -xe" for details.问题
    Linux中部署DNS分离解析技术
    NFS网络文件系统服务搭建
    Samba服务搭建
    Linux RAID磁盘阵列技术
  • 原文地址:https://www.cnblogs.com/shanhaihong/p/5690705.html
Copyright © 2020-2023  润新知