首页 > 其他 > 详细

全选,反选,全不选整理

时间:2018-08-31 16:20:52      阅读:191      评论:0      收藏:0      [点我收藏+]

HTML代码

    <input type="checkbox" class="chk" name="" id="" value=""/>
        <input type="checkbox" class="chk" name="" id="" value=""/>
        <input type="checkbox" class="chk" name="" id="" value=""/>
        <input type="checkbox" class="chk" name="" id="" value=""/>
        <input type="checkbox" class="chk" name="" id="" value=""/>
        <input type="checkbox" class="chk" name="" id="" value=""/>
        <input type="checkbox" class="chk" name="" id="" value=""/>
        <button onclick="fanxuan()">反选</button>
        <button onclick="quanxuan()">全选</button>
        <button onclick="quanbuxuan()">全不选</button>

script代码

    function fanxuan(){
        var chk = document.getElementsByClassName("chk");
        for (var i=0;i<chk.length;i++ ) {
            if(chk[i].checked){
                chk[i].checked = false;
            }else{
                chk[i].checked = true;
            }
        }
    }
        function quanxuan() {
        var aa = document.getElementsByClassName(‘chk‘);
        for(var i=0; i<aa.length; i++){
        if(aa[i].name==name){
            aa[i].checked = true;
        }
    }
}
        function quanbuxuan() {
        var bb = document.getElementsByClassName(‘chk‘);
        for(var i=0; i<bb.length; i++){
        if(bb[i].name==name){
        bb[i].checked = false;
        }
    }
} 

反选示例

技术分享图片

 

 

技术分享图片

 

全选

技术分享图片

全不选

技术分享图片

 

全选,反选,全不选整理

原文:https://www.cnblogs.com/q-1234/p/9566357.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!