本日跟大家写了一份js的联动全选的源码,代码少,清晰易懂。

效果是这样的:

点击全选下面的就会被全部全选,或者下面的被逐一选择,全选按钮也会当选中。
利用复选框来实现的联动全选的功能。

html全选按钮Javascript简略易懂的复选框联动全选很适用 RESTful API

点击上面的复选框就会被全选

Javascript:联动全选

当下放的复选框没有被全选,最上面的全选按钮未当选中

复选框联动全选js代码实现:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset=\"大众utf-8\"大众>

<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>

相比拟较大略,对付初学者该当有很好的帮助!
请关注键盘码农。
后期连续更新,如有什么意见请不才方评论。
第一韶光为您解答哦!