<!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" οnchange="chageAll()"/>JavaScript</p> <p><input type="checkbox" name="like" οnchange="chageAll()"/>JavaBean</p> <p><input type="checkbox" name="like" οnchange="chageAll()"/>JavaOop</p> <p><input type="checkbox" name="like" οnchange="chageAll()"/>JavaWeb</p> <p><input type="checkbox" id="checkAll" οnclick="chageCheck(this)"/>全选/全不选</p> <p><input type="button" value="反选" οnclick="unChecked()" /></p> </body> </html>
