全选、不选、反选的效果

1、js部分(checked属性)

window.onload=function(){

        var oBtn1=document.getElementById('btn1');

        var oBtn2=document.getElementById('btn2');

        var oBtn3=document.getElementById('btn3');

        var oBox=document.getElementById('box');

        var aCheck=oBox.getElementsByTagName('input');

        oBtn1.onclick=function(){

              for(var i=0;i<aCheck.length;i++){ aCheck[i].checked=true;  }

      };

      oBtn2.onclick=function(){

             for(var i=0; i<aCheck.length;i++){   aCheck[i].checked=false;  }

      };

      oBtn3.onclick=function(){

            for(var i=0; i<aCheck.length;i++){

                  if(aCheck[i].checked==false){   aCheck[i].checked=true;

                 }else{  aCheck[i].checked=false; }

           }

     };

};

1、html部分

<input type="button" value="全选" id="btn1" />

<inpu ttype="button" value="不选" id="btn2" />

<input type="button" value="反选" id="btn3" />

<div id="box">

     <input type="checkbox" />

    <input type="checkbox" />

    <input type="checkbox" />

<div/>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,362评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,378评论 2 17
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 4,177评论 0 0
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 10,775评论 0 7
  • 概述:主要讲了如何将tornado和wsgi结合使用。注意一点,如果结合wsgi,将无法async。
    交话费的时间放寒假阅读 3,674评论 0 0