复选框全选/全部选

Posted sspofa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了复选框全选/全部选相关的知识,希望对你有一定的参考价值。

复选框全选/全部选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            window.onload = function() {
                /*
                    全选按钮点击按钮以后,四个多选框全部被选中
                */
                // 为idcheckedAllBtn的按钮绑定一个单击相应函数
                var item = document.getElementsByName('items');
                
                var checkedAllBtn = document.getElementById('checkedAllBtn');
                checkedAllBtn.onclick = function() {
                    //获取四个多选框items
                    
                    // 遍历items
                    for (var i = 0; i < item.length; i++) {
                        // 设置四个多选框变成选中状态
                        // 通过多选框的checked属性可以来获取或者设置复选框是否被选中
                        item[i].checked = true;
                    }
                }

                // 为checkedNoBtn的按钮绑定一个单击相应函数
                var checkedNoBtn = document.getElementById('checkedNoBtn');
                checkedNoBtn.onclick = function() {
                    //获取v
                    // 遍历items
                    for (var i = 0; i < item.length; i++) {
                        // 设置四个多选框变成选中状态
                        // 通过多选框的checked属性可以来获取或者设置复选框是否被选中
                        item[i].checked = false;
                    }
                }
                
                // 为checkedRevBtn的按钮绑定一个单击相应函数
                var checkedRevBtn = document.getElementById('checkedRevBtn');
                checkedRevBtn.onclick = function() {
                    //获取四个多选框items
                    
                    // 遍历items
                    for (var i = 0; i < item.length; i++) {
                        // 设置四个多选框变成选中状态
                        // 通过多选框的checked属性可以来获取或者设置复选框是否被选中
                        item[i].checked = !item[i].checked;
                    }
                }
                
                // 为sendBtn的按钮绑定一个单击相应函数
                var sendBtn = document.getElementById('sendBtn');
                sendBtn.onclick = function() {
                    //获取四个多选框items
                    
                    // 遍历items
                    console.log(123);
                    for (var i = 0; i < item.length; i++) {
                        // 设置四个多选框变成选中状态
                        // 通过多选框的checked属性可以来获取或者设置复选框是否被选中
                        if(item[i].checked){
                            console.log(item[i].value);
                        }
                    }
                }
                
                //为checkedAllBox的复选框绑定一个单击相应函数
                var checkedAllBox = document.getElementById('checkedAllBox');
                checkedAllBox.onclick=function(){
                    
                    for (var i = 0; i < item.length; i++) {
                        // 设置四个多选框变成选中状态
                        // 通过多选框的checked属性可以来获取或者设置复选框是否被选中
                        item[i].checked=this.checked;
                    }
                }
                //为四个多选框分别绑定点击响应函数
                for (var i = 0; i<item.length;i++){
                    item[i].onclick=function(){
                        //将checkedAllBox设置为选中状态
                        checkedAllBox.checked=true;
                        for(var j=0;j<item.length;j++){
                            // 判断四个多选框是否是全选
                            if(!item[j].checked){
                                // 一旦进入判断,则证明不是全选状态
                                // 将checkedAllBox设置为没有选中状态
                                checkedAllBox.checked=false;
                                
                                // 一旦进入判断  则已经得出结果  不用再继续执行循环
                                break;
                            }
                        }
                        
                    }
                }
                
            }
        </script>
    </head>
    <body>
        <form action="" method="post">
            你爱好的运动是什么?<input type="checkbox" id="checkedAllBox" value="" /><label for="checkedAllBox">全选/全不选</label>
            <br />
            <input type="checkbox" name="items" id="1" value="足球" /><label for="1">足球</label>
            <input type="checkbox" name="items" id="2" value="篮球" /><label for="2">篮球<label>
            <input type="checkbox" name="items" id="3" value="羽毛球" /><label for="3">羽毛球</label>
            <input type="checkbox" name="items" id="4" value="乒乓球" /><label for="4">乒乓球</label>
            <br />
            <input type="button" id="checkedAllBtn" value="全 选" />
            <input type="button" id="checkedNoBtn" value="全不选" />
            <input type="button" id="checkedRevBtn" value="反 选" />
            <input type="button" id="sendBtn" value="提 交" />
        </form>
    </body>
</html>

<!DOCTYPE html>




以上是关于复选框全选/全部选的主要内容,如果未能解决你的问题,请参考以下文章

全选按钮,点击全选,复选框全部选中

js中复选框怎么做全选 但是不全部选中

表单全选取消全选

JavaScript Javascript - 全部选中/取消全选复选框功能

js实现复选框的全选全部选和反选

js 实现复选框全选 全部选