大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
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-3br
input type="checkbox" name="test" value="4"item-4
input type="checkbox" name="test" value="5"item-5br
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=0;icks.length;i++){
cks[i].checked = option;
}
}
3、效果演示
建议你先写好一个隐藏的DIV,然后写上复选框,点击的时候让这个DIV现实就行了,可能要设置下透明浮动等样式
建议你先写好一个隐藏的DIV,然后写上复选框,点击的时候让这个DIV现实就行了,可能要设置下透明浮动等样式
在动态生成的时候,需要对 CHECKBOX 的ID 做一些特殊的命名,比如:根是ROOT,父亲是 P_标志位_序号,子节点是 标志位_序号 这种类型的, 才会容易控制