全选复选框JavaScript编写小结(附代码)
更新时间:2017年08月16日 11:03:21 作者:代码终结者222
这篇文章主要介绍了全选”复选框JavaScript编写,分别附上html和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;
}
}
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持!
相关文章
javascript学习笔记整理(概述、变量、数据类型简介)
这篇文章主要介绍了javascript学习笔记整理(概述-变量-数据类型),需要的朋友可以参考下2015-10-10
javascript获取函数名称、函数参数、对象属性名称的代码实例
这篇文章主要介绍了javascript获取函数名称、函数参数、对象属性的代码实例,需要的朋友可以参考下2014-04-04
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
大家对JavaScript中圆括号() 和 方括号[] 的特殊用法或许有些疑问,本文就带着这些疑问为大家详细介绍下,有疑问的朋友可不要错过了哈2013-08-08
在JavaScript中操作时间之getMonth()方法的使用
这篇文章主要介绍了在JavaScript中操作时间之getMonth()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06


最新评论