<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Title</title>
<script type="text/javascript">
function checkAll(booleanValue){
var hobbies = document.getElementsByName("hobby");
for(var i=0; i<hobbies.length; i++){
hobbies[i].checked=booleanValue;
}
}
function reverseCheck() {
var hobbies = document.getElementsByName("hobby");
for(var i=0; i<hobbies.length; i++){
hobbies[i].checked==true?hobbies[i].checked=false:hobbies[i].checked=true;
}
}
</script>
</head>
<body>
<h1>请选择你的爱好：</h1>
全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)"/><br/>
<br/>
<input type="checkbox" name="hobby" value="football" onclick="checkonly(this)"/>足球
<input type="checkbox" name="hobby" value="basketball" onclick="checkonly(this)"/>篮球
<input type="checkbox" name="hobby" value="swimming" onclick="checkonly(this)"/>游泳
<input type="checkbox" name="hobby" value="singing" onclick="checkonly(this)"/>唱歌<br/>
<br/>
<input type="button" value="全选" onclick="checkAll(true)"/>
<input type="button" value="全不选" onclick="checkAll(false)"/>
<input type="button" value="反选" onclick="reverseCheck()"/>
</body>
</html>练习：JavaScript实现复选框全选，全不选，反选
猜你喜欢
转载自blog.csdn.net/Ada_yangyang/article/details/81290336
今日推荐
周排行