html 全选或全不选小案例-526互联

lf 你爱好的运动是？全选/全不选
足球篮球羽毛球乒乓球

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>lf</title>
<script type="text/javascript">
function selectAllOrNo(){

var choice = document.getElementById("choose");
//根据对应的状态全选或全不选
if(choice.checked==true){
selectAll();
}else{
noSelect();
}
}

function selectAll(){
var choice = document.getElementById("choose");
choice.checked=true;

//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
interest.checked = true;
}
}

function noSelect(){
var choice = document.getElementById("choose");
choice.checked=false;
//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
interest.checked = false;
}
}

function selectOther(){
var choice = document.getElementById("choose");
choice.checked=true;
//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
interest.checked = !interest.checked;
// 如果存在未选择，则设置全选/全不选为不选择状态
checkSelect();
}

}
// 如果存在未选择，则设置全选/全不选为不选择状态
function checkSelect(){

var choice = document.getElementById("choose");
choice.checked=true;
//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
// 如果存在未选择，则设置全选/全不选为不选择状态
if(interest.checked==false){
choice.checked=false;
}
}
}
</script>
</head>
<body>
你爱好的运动是？
<input type="checkbox" id="choose" onclick="selectAllOrNo()"/>全选/全不选<br>

<input type="checkbox" name="interest" value="足球" onchange="checkSelect()"/>足球
<input type="checkbox" name="interest" value="篮球" onchange="checkSelect()"/>篮球
<input type="checkbox" name="interest" value="羽毛球" onchange="checkSelect()"/>羽毛球
<input type="checkbox" name="interest" value="乒乓球" onchange="checkSelect()"/>乒乓球
<br>
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="全不选" onclick="noSelect();"/>
<input type="button" value="反选" onclick="selectOther();"/>
</body>
</html>

案例

html