JavaScript

超轻量级php框架startmvc

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

更新时间:2020-05-30 07:54:01 作者:startmvc
对于全选框的操作分为两种情况:1.单击全选框,下面全部选中2.单击下面的复选框,全部

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

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

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

html样式


<tr>
 <td>爱&nbsp;&nbsp;好</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;
 }
 }

js复选框全选 复选框全选