JavaScript实现复选框的全选、全不选和反选操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选全不选操作</title>
</head>
<body>
<b>请选择你的女朋友:</b>
<input type="checkbox" id="boxid" onclick="selAllNo()"/>全选or全不选</br>
<input type="checkbox" name="love"/>大乔
<input type="checkbox" name="love"/>貂蝉
<input type="checkbox" name="love"/>王昭君
<input type="checkbox" name="love"/>杨玉环
<input type="checkbox" name="love"/>小乔
<input type="checkbox" name="love"/>西施 </br>
<input type="button" value="全选" onclick="selAll()"/>
<input type="button" value="全不选" onclick="selNo()"/>
<input type="button" value="反选" onclick="selOther()"/>
<script type="text/javascript">
function selAll(){
var love1=document.getElementsByName("love");
for(var i=0;i<love1.length;i++){
love1[i].checked=true;
}
}
function selNo(){
var love2=document.getElementsByName("love");
for(var i=0;i<love2.length;i++){
love2[i].checked=false;
}
}
function selOther(){
var love3=document.getElementsByName("love");
for(var i=0;i<love3.length;i++){
if(love3[i].checked==true){
love3[i].checked=false;
}else{
love3[i].checked=true;
}
}
}
function selAllNo(){
var box1=document.getElementById("boxid");
if(box1.checked==true){
selAll();
}else{
selNo();
}
}
</script>
</body>
</html>