本日跟大家写了一份js的联动全选的源码,代码少,清晰易懂。
效果是这样的:
点击全选下面的就会被全部全选,或者下面的被逐一选择,全选按钮也会当选中。利用复选框来实现的联动全选的功能。
点击上面的复选框就会被全选
Javascript:联动全选
当下放的复选框没有被全选,最上面的全选按钮未当选中
复选框联动全选js代码实现:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type=\公众text/javascript\"大众>
window.onload = function ()
{
var oBtn1 = document.getElementById('btn1');
var oBox = document.getElementById('box');
var oInputs = oBox.getElementsByTagName('input');
oBtn1.onclick = function ()
{
if (oBtn1.checked == true) {
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].checked = true;
}
} else {
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].checked = false;
}
}
}
//点击每一个input框
for (var i = 0; i < oInputs.length; i++) {
oInputs[i].onclick = function ()
{
var n = 0;
for (var i = 0; i < oInputs.length; i++) {
if (oInputs[i].checked == true) {
n++;
}
}
if (n == oInputs.length) {
oBtn1.checked = true;
} else {
oBtn1.checked = false;
}
}
}
}
</script>
</head>
<body>
<h1>全选/全不选</h1>
<input type=\"大众checkbox\公众 id=\"大众btn1\"大众>
<div id=\"大众box\"大众>
<input type=\"大众checkbox\公众 name=\"大众\"大众>
<input type=\公众checkbox\公众 name=\公众\"大众>
<input type=\"大众checkbox\公众 name=\"大众\公众>
<input type=\"大众checkbox\公众 name=\"大众\"大众>
</div>
</body>
</html>
相比拟较大略,对付初学者该当有很好的帮助!
请关注键盘码农。后期连续更新,如有什么意见请不才方评论。第一韶光为您解答哦!