美文网首页
全选练习(二)

全选练习(二)

作者: 持续5年输出bug | 来源:发表于2018-11-16 08:08 被阅读0次

    基本代码:

     <div>
        你爱好的运动是?
        <input  type="checkbox" id="chosen"/>全选/全不选
        <br/>
        <input  type="checkbox" name="items" value="瑜伽"/>瑜伽
        <input  type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input  type="checkbox" name="items" value="排球"/>排球
        <input  type="checkbox" name="items" value="篮球"/>篮球
        <br/>
        <br/>
      </div>
    

    目的:点击全选/全不选,items全部被选中或者全部不被选中,当不是全选中状态的时候,全选/全不选的checkbox也随之改变。
    分析:
    首先 通过第一次for循环给 items[i]都绑定鼠标单击响应函数,
    然后再通过for循环去判断items是否被全部选中,如果不被全部选中 if(!items[j].checked),如果是,那么让chosen的状态为false,
    到这一步会发现,当items被勾选掉一个,再去重复全部勾选状态时chosen并未被选中,是因为在第一次for循环开始时需要设置chosen.checked=true;

       </script>
    
           function myClick (idStr , fun){
                var btn =document.getElementById(idStr);
                btn.onclick =fun;
            }
    
         var items=document.getElementsByName("items");
         var chosen=document.getElementById("chosen");
    
            for(var i =0; i<items.length;i++){
                    items[i].onclick=function(){
                    chosen.checked=true;
                       for(var j =0;j<items.length;j++){
                          if(!items[j].checked){
                              chosen.checked = false;
                              break;
                          }
                       }
                    }
                }
        </script>

    相关文章

      网友评论

          本文标题:全选练习(二)

          本文链接:https://www.haomeiwen.com/subject/gsrpfqtx.html