<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
document.write("<br>-------------多选事件触发------------------<br>");
//1.当所有选项全部勾选时触发全选按钮事件
function chageAll(){
var x = 0; //勾选位数
var cblist = document.getElementsByName("like");
var checkAll = document.getElementById("checkAll");
for(i=0;i<cblist.length;i++){
if(cblist[i].checked){
x++;
}else{
x--;
}
}
if(x==4){
checkAll.checked=true; //多选框全部选中时结果返回true
}else{
checkAll.checked=false; //多选框没有全部选中时结果返回false
}
}
//2. 点击（全选/全不选）按钮 触发 勾选选项 事件
function chageCheck(element){
var cblist = document.getElementsByName("like"); //获取所有name为like的多选控件
if(element.checked){
for(i=0;i<cblist.length;i++){
cblist[i].checked=true;
}
}else{
for(i=0;i<cblist.length;i++){
cblist[i].checked=false;
}
}
}
//3.反选事件
function unChecked() {
var cblist = document.getElementsByName("like"); //获取所有name为like的多选控件
for(i=0;i<cblist.length;i++){
if(cblist[i].checked){
cblist[i].checked=false;
}else{
cblist[i].checked=true;
}
}
chageAll();
}
</script>
</head>
<body>
<p><input type="checkbox" name="like" onchange="chageAll()"/>JavaScript</p>
<p><input type="checkbox" name="like" onchange="chageAll()"/>JavaBean</p>
<p><input type="checkbox" name="like" onchange="chageAll()"/>JavaOop</p>
<p><input type="checkbox" name="like" onchange="chageAll()"/>JavaWeb</p>
<p><input type="checkbox" id="checkAll" onclick="chageCheck(this)"/>全选/全不选</p>
<p><input type="button" value="反选" onclick="unChecked()" /></p>
</body>
</html>