0
点赞
收藏
分享

微信扫一扫

Javascript知识【案例:复选框操作】


复选框操作

Javascript知识【案例:复选框操作】_html

 为达到以上效果,我们需要获取所有的复选框元素对象,然后对checked属性进行操作即可

Javascript知识【案例:复选框操作】_javascript_02

 

分析:

关键点:

  1. 获取指定复选框元素   document.getElementsByClassName
  2. 通过JS进行复选框的选中/取消选中

复选框对象.checked=true;//选中 (复选框对象.checked="checked";)

复选框对象.checked=false;//取消选中(复选框对象.checked="";)

<input type="checkbox" id="cb"/><br/>
<input type="button" value="点我选中" onclick="document.getElementById('cb').checked=true;"/>
<input type="button" value="点我取消选中" onclick="document.getElementById('cb').checked=false;"/>


 

步骤:

  • 分别为三个按钮绑定点击事件
  • 分别进行监听器的实现

//全选

//1、获取四个复选框

//2、遍历四个复选框,每遍历一个,将其checked属性设置为true

//全不选

//1、获取四个复选框

//2、遍历四个复选框,每遍历一个,将其checked属性设置为false

//反选

//1、获取四个复选框

//2、遍历四个复选框,每遍历一个,将其checked属性设置为取反值(!)

  1. 代码实现:

 


<script>
   window.onload=function (ev) {
      //1、获取四个复选框
      var arr = document.getElementsByClassName("itemSelect");
      document.getElementById("qx").onclick=function (ev1) {
         //全选
         //1、获取四个复选框
         //2、遍历四个复选框,每遍历一个,将其checked属性设置为true
         for (var i = 0; i <arr.length ; i++) {
            arr[i].checked = true;
         }
      };
      document.getElementById("qbx").onclick=function (ev1) {
         //全不选
         //1、获取四个复选框
         //2、遍历四个复选框,每遍历一个,将其checked属性设置为false
         for (var i = 0; i <arr.length ; i++) {
            arr[i].checked = false;
         }
      };
      document.getElementById("fx").onclick=function (ev1) {
         //反选
         //1、获取四个复选框
         //2、遍历四个复选框,每遍历一个,将其checked属性设置为取反值(!)
         for (var i = 0; i <arr.length ; i++) {
            arr[i].checked = !arr[i].checked;
         }
      };
   }
</script>


小结:

复选框.checked=true;//选中

复选框.checked=false;//取消选中

复选框.checked=!复选框.checked;//反选

 

举报

相关推荐

0 条评论