JavaWeb中很常见的一种功能是checkbox的选择问题。下面是功能展示图:
代码部分:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<form method="post" action="">
请选择您的爱好!
<br><input type="checkbox" name ="item" id="checkedAll_2"/>全选/全不选
<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="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/>
</form>
</body>
<script language="JavaScript">
//反选
//1 获得反选按钮,添加点击事件
document.getElementById("CheckedRev").οnclick=function(){
//2 获得到要操作4个input 对象
var items = document.getElementsByName("items");
//3 遍历
for(var i = 0 ; i < items.length ; i++){
items[i].checked = !items[i].checked;
}
}
//全选
//1 获得反选按钮,添加点击事件
document.getElementById("CheckedAll").οnclick=function(){
//2 获得到要操作4个input 对象
var items = document.getElementsByName("items");
//3 遍历
for(var i = 0 ; i < items.length ; i++){
items[i].checked = true;
}
}
//全不选选
//1 获得反选按钮,添加点击事件
document.getElementById("CheckedNo").οnclick=function(){
//2 获得到要操作4个input 对象
var items = document.getElementsByName("items");
//3 遍历
for(var i = 0 ; i < items.length ; i++){
items[i].checked = false;
}
}
</script>
</html>
相关文章: