javascript实现checkbox复选框全选和反选功能
分类：实例代码
复选框的全选和反选功能在实际应用中非常普遍，常见于对于文件的批量操作。
本章节就分享一段使用原生javascript实现的此功能，需要的朋友可以做一下参考。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload = function () {
var obtn1 = document.getElementById('btn1');
var obtn2 = document.getElementById('btn2');
var obtn3 = document.getElementById('btn3');
var odiv = document.getElementById('div1');
var ocheck = odiv.getElementsByTagName('input');
//全选
obtn1.onclick = function () {
for (var index = 0; index < ocheck.length; index++) {
ocheck[index].checked = true;
}
};
//不选
obtn2.onclick = function () {
for (var index = 0; index < ocheck.length; index++) {
ocheck[index].checked = false;
}
};
//反选
obtn3.onclick = function () {
for (var index = 0; index < ocheck.length; index++) {
ocheck[index].checked = !ocheck[index].checked;
}
};
}
</script>
</head>
<body>
<input type="button" id="btn1" value="全选" />
<input type="button" id="btn2" value="不选" />
<input type="button" id="btn3" value="反选" />
<div id="div1">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
</body>
</html>
javascript实现checkbox复选框全选和反选功能，这样的场景在实际项目中还是用的比较多的，关于javascript实现checkbox复选框全选和反选功能就介绍到这了。
javascript实现checkbox复选框全选和反选功能属于前端实例代码，有关更多实例代码大家可以查看。