CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js函数就行了。。。
<script language="javascript">function cli(Obj)
{
//获取控制其它复选框的对象obj
var collid = document.getElementByIdx_x("all")
//获取需要全选,全不选功能的所有复选框
var coll = document.getElementsByName(Obj)
//如果obj被选中,则全选
if (collid.checked){
//循环设置所有复选框为选中状态
for(var i = 0 i < coll.length i++)
coll[i].checked = true
}else{//取消obj选中状态,则全不选
//循环设置所有复选框为未选中状态
for(var i = 0 i < coll.length i++)
coll[i].checked = false
}
}
</script>
----------------------------------------------------
下面是一组CheckBox复选框html代码
----------------------------------------------------
<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称')"> 全选<input name='多选项名称' type='checkbox' value='' > A
<input name='多选项名称' type='checkbox' value='' > B
<input name='多选项名称' type='checkbox' value='' > C
<input name='多选项名称' type='checkbox' value='' > D
<input name='多选项名称' type='checkbox' value='' > E
<input name='多选项名称' type='checkbox' value='' > F
----------------------------------------------------
思路:获取复选框对象→循环设置ckecked属性值(true表示选中,false表示未选中)。关键代码:
obj.checked = true | false实例演示如下:
1、HTML结构
<input type="checkbox" name="test" value="1">item-1<input type="checkbox" name="test" value="2">item-2
<input type="checkbox" name="test" value="3">item-3<br>
<input type="checkbox" name="test" value="4">item-4
<input type="checkbox" name="test" value="5">item-5<br>
<input type="button" value="全选" onclick="setChecked(true)"><input type="button" value="取消" onclick="setChecked(false)">
2、javascript代码
function setChecked(option){var cks = document.getElementsByName("test")
for(i=0i<cks.lengthi++){
cks[i].checked = option
}
}
3、效果演示
<title>无标题文档</title><script type="text/javascript" language="javascript">
function selall()
{
var start = 1
var end = 4
for(var i=starti<=endi++)
{
eval("document.all.a"+i+".checked=true")
}
}
</script>
</head>
<body>
<input type="checkbox" name="a1" value="a1">
<input type="checkbox" name="a2" value="a2">
<input type="checkbox" name="a3" value="a3">
<input type="checkbox" name="a4" value="a4">
<input type="button" onclick="selall()" value="全选">
</body>