使用js实现全选单选全部选

最新推荐文章于 2021-10-16 19:35:49 发布

chen529834149

最新推荐文章于 2021-10-16 19:35:49 发布

阅读量7.8k

点赞数 2

文章标签： php javascript

本文链接：https://blog.csdn.net/chen529834149/article/details/50582562

版权

/ 思路：1、获取元素。2、用for循环历遍数组，把checkbox的checked设置为true即实现全选，
// 把checkbox的checked设置为false即实现不选。3、通过if判断，如果checked为true选中状态的，

// 就把checked设为false不选状态，如果checked为false不选状态的，就把checked设为true选中状态。

html
   全选：<input type="button" id="All" value="全选" /><br />
   不选：<input type="button" id="uncheck" value="不选" /><br />
   反选：<input type="button" id="othercheck" value="反选" /><br />
   <div id="div">
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
        <input type="checkbox" /><br />
   </div>
   ---------js代码--------
   <script>
window.οnlοad=function(){
    var CheckAll=document.getElementById('All');
    var UnCheck=document.getElementById('uncheck');
    var OtherCheck=document.getElementById('othercheck');
    var div=document.getElementById('div');
    var    CheckBox=div.getElementsByTagName('input');
    CheckAll.οnclick=function(){
            for(i=0;i<CheckBox.length;i++){
                    CheckBox[i].checked=true;
                };

    UnCheck.οnclick=function(){
            for(i=0;i<CheckBox.length;i++){
                    CheckBox[i].checked=false;
                };
        };
    othercheck.οnclick=function(){
            for(i=0;i<CheckBox.length;i++){
                    if(CheckBox[i].checked==true){
                            CheckBox[i].checked=false;
                        }
                    else{
                        CheckBox[i].checked=true
                        }

                };
        };
};
之前感觉很难学，后来思路清晰了感觉写起来也没那么难了。有不足之处大家指出来