其他分享
首页 > 其他分享> > 全选/全不选案例

全选/全不选案例

作者:互联网

<!DOCTYPE html>


<meta charset="utf-8"/>

<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>
posted @ 2019-12-11 21:56  小咸鱼|大梦想  阅读(...)  评论(...)  编辑 收藏 刷新评论刷新页面返回顶部

标签:checked,item,items,案例,全选,选中,全不选,var,选框
来源: https://www.cnblogs.com/SSPOFA/p/12026070.html