前端ABC<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端abc--qdabc.cn</title>
<body>
<form method="post" action="">
请选择您的爱好:<br/>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="游泳" />游泳
<input type="checkbox" name="items" value="唱歌" />唱歌<br/>
<input type="button" id="CheckAll" value="全 选" />
<input type="button" id="CheckNo" value="全不选" />
<input type="button" id="CheckRev" value="反 选" />
<input type="button" id="Reversal" value="全选/不选" />
</form>
</body>
<script type="text/javascript">
// 全选
document.getElementById("CheckAll").onclick = function() {
var items = document.getElementsByName("items");
for (var i = 0; i < items.length; i++) {
items[i].checked = true;
}
}
// 全不选
document.getElementById("CheckNo").onclick = function() {
var items = document.getElementsByName("items");
for (var i = 0; i < items.length; i++) {
items[i].checked = false;
}
}
// 反选
document.getElementById("CheckRev").onclick = function() {
var items = document.getElementsByName("items");
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
}
// 全选/不选
document.getElementById("Reversal").onclick = function() {
var items = document.getElementsByName("items");
if (items[0].checked) {
for (var i = 0; i < items.length; i++) {
items[i].checked = false;
}
} else {
for (var i = 0; i < items.length; i++) {
items[i].checked = true;
}
}
}
</script>
</head>
</html>
欢迎分享本文，转载请保留出处：前端ABC » JS之checkbox多选框的全选、反选、不选用法