checkbox的全选与取消肯定有不同的方法,本文介绍的方法的关键点在于:checkbox组的名字相同,点击控制全选的checkbox时调用js,使checkbox组的checked属性与控制全选的checkbox的checked属性保持一致。
<script type='text/javascript'>
function selectAll(e) {
//返回所有名为‘chk’的元素数组
var boxs = document.getElementsByName('chk');
var len = boxs.length;
for (var i = 0; i < len; i++)
{
//操作checkbox组的checked属性和控制全选的checkbox属性一致
boxs[i].checked = e.checked;
}
}
</script>
</head>
<body>
<form>
<!--checkbox组-->
<input type='checkbox' name='chk' />checkbox1<br />
<input type='checkbox' name='chk' />checkbox2<br />
<input type='checkbox' name='chk' />checkbox3<br />
<input type='checkbox' name='chk' />checkbox4<br />
<input type='checkbox' name='chk' />checkbox5<br />
<!--控制全选的checkbox-->
<input type='checkbox' name='control' onClick='selectAll(this);'/>全选
</form>
</body>
效果如下: