全选复选框JavaScript编写小结（附代码）

对于全选框的操作分为两种情况：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;
 }
 }