首页 > 编程 > JavaScript > 正文

全选复选框JavaScript编写小结(附代码)

2019-11-19 15:46:45
字体:
来源:转载
供稿:网友

对于全选框的操作分为两种情况:

1.单击全选框,下面全部选中

2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中。

html样式

<tr>     <td>爱  好</td>     <td>      <label for=""><input type="checkbox" name="fav" id="" value="苹果" class="btn"/>苹果</label>     </td>     <td>      <label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label>     </td>     <td>      <label for=""><input type="checkbox" name="" id="checkAll" value="全选" class="btn"/>全选</label>     </td>    </tr>

js样式

var oChkAll = document.getElementById("checkAll");    //全选    oChkAll.onclick = function() {     for(var i = 0; i < oFav.length; i++) {      oFav[i].checked = this.checked;     }    }    //复选框组    for(var i = 0; i < oFav.length; i++) {     oFav[i].onclick = function() {      //如果全选      if(isChkAll()) {       oChkAll.checked = true;      } else {       oChkAll.checked = false;      }     }    }    //判断是否全选    function isChkAll() {     var all = oFav.length;     var chk = 0;     for(var i = 0; i < oFav.length; i++) {      if(oFav[i].checked) {       chk++;      }     }     if(all == chk) {      return true;     } else {      return false;     }    }

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对武林网的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表