复选框全选/全部选

2022-10-12,

复选框全选/全部选

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

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-14 13:14 
小咸鱼|大梦想 
阅读(...
评论(...

编辑

收藏

markdown_highlight();

var allowcomments = true, cb_blogid = 549393, cb_blogapp = 'sspofa', cb_bloguserguid = 'f86c42e4-c011-4403-c0c4-08d7431a305b';
var cb_entryid = 12038860, cb_entrycreateddate = '2019-12-14 13:14', cb_posttype = 1;
loadviewcount(cb_entryid);

var commentmanager = new blogcommentmanager();
commentmanager.rendercomments(0);

刷新评论刷新页面

var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

googletag.cmd.push(function () {
googletag.defineslot("/1090369/c1", [300, 250], "div-gpt-ad-1546353474406-0").addservice(googletag.pubads());
googletag.defineslot("/1090369/c2", [468, 60], "div-gpt-ad-1539008685004-0").addservice(googletag.pubads());
googletag.pubads().enablesinglerequest();
googletag.enableservices();
});

if (new date() >= new date(2018, 9, 13)) {
googletag.cmd.push(function () { googletag.display("div-gpt-ad-1539008685004-0"); });
}

fixpostbody();
settimeout(function () { incrementviewcount(cb_entryid); }, 50);
deliveradt2();
deliveradc1();
deliveradc2();
loadnewsandkb();
loadblogsignature();
loadpostcategoriestags(cb_blogid, cb_entryid); loadpostinfoblock(cb_blogid, cb_entryid, cb_blogapp, cb_bloguserguid);
getprevnextpost(cb_entryid, cb_blogid, cb_entrycreateddate, cb_posttype);
loadoptunderpost();
gethistorytoday(cb_blogid, cb_blogapp, cb_entrycreateddate);

《复选框全选/全部选.doc》

下载本文的Word格式文档,以方便收藏与打印。