全选复选框js编写 全选复选框JavaScript编写小结（附代码）
代码终结者222 人气:0想了解全选复选框JavaScript编写小结（附代码）的相关内容吗，代码终结者222在本文为您仔细讲解全选复选框js编写的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js复选框全选,复选框全选，下面大家一起来学习吧。
对于全选框的操作分为两种情况：
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;
}
}
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对的支持!
加载全部内容