<html>
<head>
<title>Html示例</title>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" id="boxid" onclick="selectAllNo()"/>全选/全不选
<br/>
<input type ="checkbox" name="love">篮球
<br/>
<input type ="checkbox" name="love">排球
<br/>
<input type ="checkbox" name="love">羽毛球
<br/>
<input type ="checkbox" name="love">乒乓球
<br/>
<input type="button" value="全选" onclick="selectAll()"/>
<input type="button" value="全不选" onclick="selectNo()"/>
<input type="button" value="反选" onclick="selectOther()"/>
<script type ="text/javascript">
//实现全选/全不选的操作
function selectAllNo() {
var box =document.getElementById("boxid");
if (box.checked==true) {
selectAll();
} else {
selectNo();
}
}
//全选的操作
function selectAll() {
var loves=document.getElementsByName("love");
for(var i=0;i<loves.length;i++) {
var love1 =loves[i];
love1.checked=true; //如果选中，属性checked设置成true 否则为false
}
}
//全不选的操作
function selectNo() {
var loves2=document.getElementsByName("love");
for(var i=0;i<loves2.length;i++) {
var love2 =loves2[i];
love2.checked=false;
}
}
//反选的操作 意思就是比如总共4个 选了前面2个以后，点击反选会选择后面2个
function selectOther() {
var loves3 =document.getElementsByName("love");
for (var i=0;i<loves3.length;i++) {
var love3=loves3[i];
if(love3.checked==true) { //判断是否选中，如果选中了，就改成false；如果没有选中，就改成true
love3.checked=false;
} else {
love3.checked=true;
}
}
}
</script>
</body>
</html>
结果为 
时间： 2024-08-23 14:41:39