<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JS </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* 得到页面所有的复选框集合 */
var chbs = document.getElementsByName("chbtest");
/* 实现全选全不选反选 */
function checkAll() {
for(var i = 0; i < chbs.length; i++) {
chbs[i].checked = document.getElementById("chball").checked;
}
}
/* 选择子项时判断所有的子项是否已经选中，是的话将"全选复选框"选中；否则将全选取消 */
function check(chbox) {
var isCheckAll = true;
for(var i = 0; i < chbs.length; i++) {
if(chbs[i].checked == false) {
isCheckAll = false;
}
}
document.getElementById("chball").checked = isCheckAll;
}
//-->
</SCRIPT>
<style tyle="text/css">
.{
font-size:12px;
}
</style>
<BODY>
<span>
实现全选全不选反选<br />
并且,如果是在全选状态下将子复选框的选中取消,<br />
那么全选复选框自动取消全选<br />
如果全选复选框没有选中而子复选框全部被选中,<br />
那么全选复选框自动选中全选<br />
</span>
<FORM METHOD=POST ACTION="" name="myform">
<INPUT TYPE="checkbox" NAME="chball" id="chball" value="-1" onclick="checkAll()">全选<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="1" onclick="check(this)">1<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="2" onclick="check(this)">2<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="3" onclick="check(this)">3<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="4" onclick="check(this)">4<br />
<INPUT TYPE="checkbox" NAME="chbtest" id="chbtest" value="5" onclick="check(this)">5<br />
</FORM>
</BODY>
</HTML>
- 1
- 2
前往页