<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选、全不选和反选</title>
</head>
<body bgcolor="antiquewhite">
<script type="text/javascript">
window.onload = function(){
//获取所有的爱好
var aiHaos = document.getElementsByName("aiHao");
//给全选按钮绑定鼠标单击事件
document.getElementById("111").onclick = function(){
for(var i = 0;i < aiHaos.length;i++){
aiHaos[i].checked = true;
}
}
//给全不选按钮绑定鼠标点击事件
document.getElementById("222").onclick = function(){
for(var i = 0;i < aiHaos.length;i++){
aiHaos[i].checked = false;
}
}
//给反选按钮绑定鼠标点击事件
document.getElementById("333").onclick = function(){
for(var i = 0;i < aiHaos.length;i++){
//将当前复选框checked属性的相反值赋值给当前checked属性
aiHaos[i].checked = !(aiHaos[i].checked);
}
}
}
</script>
兴趣爱好:
<input type="checkbox" name="aiHao" value="js" checked="checked"/>javaScript
<input type="checkbox" name="aiHao" value="java"/>java
<input type="checkbox" name="aiHao" value="json"/>json
<input type="checkbox" name="aiHao" value="html"/>html
<input type="checkbox" name="aiHao" value="css"/>css<br/>
<input type="button" id="111" value="全都选">
<input type="button" id="222" value="全不选">
<input type="button" id="333" value="反向选"><br/>
</body>
</html>
DOM编程-全选、全不选和反选
最新推荐文章于 2024-03-24 00:16:48 发布