<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
你的爱好
<br />
<hr />
<input name="checkItems" id="checkItems" type="checkbox" value="全选" />全选/全不选
<input name="items" type="checkbox" value="篮球" checked />篮球
<input name="items" type="checkbox" value="足球" />足球
<input name="items" type="checkbox" value="游泳" />游泳
<input name="items" type="checkbox" value="唱歌" />唱歌
<br />
<input name="chaeckAll" id="chaeckAll" type="button" value="全选" />
<input name="chaeckNo" id="chaeckNo" type="button" value="全不选" />
<input name="chaeckAll" id="check_revsern" type="button" value="反选" />
</body>
<script language="javascript">
window.onload = function() {
//全选
document.getElementById("chaeckAll").onclick = function() {
var itemElements = document.getElementsByName("items");
for ( var i = 0; i < itemElements.length; i++) {
var itemElement=itemElements[i];
//itemElements[i].setAttribute("checked", "checked");
itemElement.checked=true;
}
}
//全不选
document.getElementById("chaeckNo").onclick = function() {
var itemElements = document.getElementsByName("items");
for ( var i = 0; i < itemElements.length; i++) {
var itemElement=itemElements[i];
//itemElement.setAttribute("checked", null);
itemElement.checked=false;
}
}
//反选
document.getElementById("check_revsern").onclick = function() {
var itemElements = document.getElementsByName("items");
for ( var i = 0; i < itemElements.length; i++) {
var itemElement=itemElements[i];
if (itemElement.checked) {
itemElement.checked=false;
}else{
itemElement.checked=true;
}
}
}
//全选/全不选
document.getElementById("checkItems").onclick = function() {
var itemElements = document.getElementsByName("items");
for ( var i = 0; i < itemElements.length; i++) {
var itemElement=itemElements[i];
if (this.checked) {
itemElement.checked=true;
}else{
itemElement.checked=false;
}
}
}
}
</script>
</html>
js复选框checkbox
最新推荐文章于 2022-10-30 20:54:47 发布