ie,ff,google均可以实现

来源：互联网发布：医疗器械行业知乎编辑：程序博客网时间：2024/04/19 11:37

<HTML>

<HEAD>

<title>checkbox全选反选</title>

//全选反选

function btnclick(id)

{

var cb=document.getElementById("list"+id).getElementsByTagName("input");

var as=document.getElementById("ckb"+id);

for(var i=0;i<cb.length;i++)

{

if(cb[i].type=="checkbox")

{

cb[i].checked=(as.checked==true)?true:false;

}

//alert(str)

}

//获取选中项的值

function getall(id)

{

var str="";//不赋值的话会出现undefined

var cb=document.getElementById(id).getElementsByTagName("input");

for(var i=0;i<cb.length;i++)

{

if(cb[i].type=="checkbox")

{

if(cb[i].checked)

{

str+=cb[i].value+",";

}

alert(str);

}

//判断父节点是否应该选中（只要子节点有选中的父节点必须选中）

function ckbparent(e,id)

{

if(e.checked)

{

document.getElementById("ckb"+id).checked=true;

}

else

{

var cb=document.getElementById("list"+id).getElementsByTagName("input");

var num=0;

for(var i=0;i<cb.length;i++)//循环判断子节点是否有选择项

{

if(cb[i].type=="checkbox")

{

if(cb[i].checked)

{

num++;

}

if(num>0)

{

document.getElementById("ckb"+id).checked=true;

}

else

{

document.getElementById("ckb"+id).checked=false;

}

</script>

<style>

.list1{ border:solid 1px #EAEAEA;}

.list1 li{ float:left; width:100px;}

</style>

</HEAD>

<input type='checkbox' id='ckb1' value="01" onClick="btnclick('1')">all

</ul>

<input type='checkbox' id='ckb2' value="02" onClick="btnclick('2')">all

</ul>

</div>

</form>

</body>

</HTML>

0 0