javascript 复选框（checkbox）全选/全不选/反选

た入场券 2021-11-19 14:24 618阅读 0赞

其实很简单，先分析一下  
效果分析：  
　　1，点击全选/全不选  
　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反  
　　2，点击反选按钮  
　　　没有选中的按钮变成选中状态，选中的按钮变成未选中  
　　　  
实现方式：  
　1，点击全选复选框  
　　判断点击的按钮是否为选中状态this.checked = true/false;  
　　 　true：设置所有复选框为选中状态  
　　 　false：设置所有复选框为未选中状态  
　　 　根据为true/false改变点击按钮的文字  
　2，点击反选  
　　对所有复选框进行遍历，判断每一个复选框是否是选中状态input\[i\].checked = true/false;  
　　　true：设置选中状态的为未选中状态  
　　　false：设置未选中状态的为选中状态  
　  
　![在这里插入图片描述][20191203133012538.png]

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>复选框（checkbox）全选/全不选/反选</title>
        <style>
            dl { 
                width: 300px;
                margin: 30px auto;
            }
    
            dd { 
                margin: 10px;
            }
        </style>
    </head>
    
    <body>
        <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
        <dl>
            <dt>
                <label for="checkall"> <input type="checkbox" id="checkall"><span>全选</span></label>
                <label for="invertcheckall"> <input type="checkbox" id="invertcheckall">反选</label>
            </dt>
            <dd><input type="checkbox" class="item">选项（1） </dd>
            <dd><input type="checkbox" class="item">选项（2） </dd>
            <dd><input type="checkbox" class="item">选项（3） </dd>
            <dd><input type="checkbox" class="item">选项（4） </dd>
            <dd><input type="checkbox" class="item">选项（5） </dd>
            <dd><input type="checkbox" class="item">选项（6） </dd>
            <dd><input type="checkbox" class="item">选项（7） </dd>
            <dd><input type="checkbox" class="item">选项（8） </dd>
            <dd><input type="checkbox" class="item">选项（9） </dd>
        </dl>
        <script type="text/javascript">
            var all = document.getElementById('checkall');
            var invertBtn = document.getElementById('invertcheckall');
            var input = document.querySelectorAll('.item');
            var select = document.querySelector('span');
    
            // 全选
            function selectAll() { 
                for (var i = 0; i < input.length; i++) { 
                    input[i].checked = true;
                }
            }
            // 全不选
            function notSelectAll() { 
                for (var i = 0; i < input.length; i++) { 
                    input[i].checked = false;
                }
            }
            // 反选
            function invertCheck() { 
                for (var i = 0; i < input.length; i++) { 
                    if (input[i].checked == false) { 
                        input[i].checked = true;
                    } else { 
                        input[i].checked = false;
                    }
                }
            }
    
            // 点击全选后，文字变成全不选，同时全部复选框选中，以此反复
            all.addEventListener('click', function () { 
                all.checked == false ? select.innerHTML = "全选" : select.innerHTML = "全不选";
                if (all.checked == true) { 
                    selectAll()
                } else { 
                    notSelectAll()
                }
            })
            // 反选，即点击后原本没有选中选中，选中的取消选中
            invertBtn.addEventListener('click', function () { 
                invertCheck()
            })
        </script>
    
    </body>
    
    </html>

[20191203133012538.png]: /images/20211119/b1772f559e0f41d0b8e8fe57e445378e.png