全选，反选，获取全选数据填充到另外区域的简单操作

最新推荐文章于 2024-05-22 08:19:24 发布
原创最新推荐文章于 2024-05-22 08:19:24 发布 · 418 阅读
0 ·
CC 4.0 BY-SA版权
JS 同时被 3 个专栏收录
32 篇文章
订阅专栏
脚本
31 篇文章
订阅专栏
JQUERY
26 篇文章
订阅专栏
本文介绍了一个简单的筛选列表操作页面实现，包括全选、全不选、反选等功能，并使用了HTML、CSS和JavaScript(jQuery)进行开发。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>筛选列表</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <script src="js/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/select.css">
    </head>

    <body>
        
        
        <div class="select_peo">
            
            
            <div class="select_peo_con">
                <div class="" style="width: 320px;float: left;">
                    <div class="title">筛选区
                        <input id="checkboxall" type="checkbox" name="checkboxbutton" onclick="funcCheckAll()">全选
                        <input id="checkboxNotall" type="checkbox" name="checkboxNotall" onclick="funcCheckNotAll()">全不选
                        <input id="checkboxInverse" type="checkbox" name="checkboxInverse" onclick="funcCheckInverse()">反选
                    </div>
                    <div class="left">
                        <div class="areas_list" id="list">
                            <p><input type="checkbox" name="ids" id="" value="" onclick="checkReturn(this)" class="subcheck"/>张三</p>
                            <p><input type="checkbox" name="ids" id="" value="" onclick="checkReturn(this)" class="subcheck"/>李四</p>
                            <p><input type="checkbox" name="ids" id="" value="" onclick="checkReturn(this)" class="subcheck"/>王五</p>
                            <p><input type="checkbox" name="ids" id="" value="" onclick="checkReturn(this)" class="subcheck"/>赵六</p>
                        </div>
                    </div>
                </div>
                <div class="center">
                    <a id="list_add">复制到确认区</a>
                    <a id="list_add">返回到筛选区</a>
                </div>
                <div class="" style="width: 320px;float: left;">
                    <div class="title">确认区</div>
                <div class="right">

                </div>
                </div>
                <div class="clear"></div>
                <div class="bot_btn">
                    <a onclick="do_add(this)" class="a_con do_add">确定</a>
                    <a class="a_con close_btn" onclick="location.reload()">取消</a>
                </div>
            </div>
        </div>
    </body>
    <script>
        function do_add(a){
            $("input[name=ids]").each(function(){
                if($(this).prop("checked")){
                    $('.right').append($(this).parent());
                }
            });
        }
        function checkReturn(obj) {
            var objIds = obj.value;
            //当没有选中某个子复选框时,checkboxall取消选中
            if (!$(".subcheck").checked) {
                $("#checkboxall").attr("checked", false);
            }
            // 获取subcheck的个数
            var chsub = $("input[type='checkbox'][class='subcheck']").length;
            // 获取选中的subcheck的个数 
            var checkedsub = $("input[type='checkbox'][class='subcheck']:checked").length;
            if (checkedsub == chsub) {
                // 控制全选按钮的选中
                $("#checkboxall").attr("checked", true); 
            }
        }
        function funcCheckAll() {
            // 判断全选按钮是否是已选中状态
            // $("#checkboxall").prop("checked")说明已选中
            // JQuery版本不同，if条件不同
            if ($("#checkboxall").prop("checked")) {
                // 将各个子单选按钮设为选中状态
                $('input[name=ids]').attr('checked', 'checked');
            } else { // 此时全选按钮起到反选作用
                // 将选中状态改为非选中
                $('input[name=ids]').removeAttr('checked');
            }
            // 将'全不选'按钮置为非选中状态
            $('input[name=checkboxNotall]').removeAttr('checked');
            // 将'反选'按钮置为非选中状态
            $('input[name=checkboxInverse]').removeAttr('checked');
        }
        function funcCheckNotAll() {
            // 将选中状态改为非选中
            $('input[name=ids]').removeAttr('checked');
            // 将'全选'按钮置为非选中状态
            $('input[name=checkboxbutton]').removeAttr('checked');
            // 将'反选'按钮置为非选中状态
            $('input[name=checkboxInverse]').removeAttr('checked');
        }
        function funcCheckInverse() {
            // 将'全选'按钮置为非选中状态
            $('input[name=checkboxbutton]').removeAttr('checked');
            // 将'全不选'按钮置为非选中状态
            $('input[name=checkboxNotall]').removeAttr('checked');
            // 获取所有子选框
            var checkDelete = document.getElementsByName("ids");
            for(var i=0; i<checkDelete.length; i++) {
                // 判断全选按钮是否是已选中状态
                if (checkDelete[i].type == "checkbox" && checkDelete[i].checked) {
                    // 将子选框设为非选中状态
                    checkDelete[i].checked = false;
                } else { 
                    // 将子选框设为选中状态
                    checkDelete[i].checked = true;
                }
            }
        }

    </script>

</html>