ie,ff,google均可以實現

Lionxxw發表於2014-06-03

<HTML>

<HEAD>

<title>checkbox全選反選</title>

<script language="javascript">

//全選反選

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>

<body leftMargin="0" topMargin="0" >

<form name="Form1" method="post" id="Form1">

<div id="ckball">

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

<ul id="list1" class="list1">

<li><input type='checkbox' onClick="ckbparent(this,'1')" id="ck1" value="1">1</li>

<li><input type='checkbox' onClick="ckbparent(this,'1')" id="ck2" value="2">2</li>

<li><input type='checkbox' onClick="ckbparent(this,'1')" id="ck3" value="3">3</li>

<li><input type='checkbox' onClick="ckbparent(this,'1')" id="ck4" value="4">4</li>

</ul>

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

<ul id="list2" class="list1">

<li><input type='checkbox' onClick="ckbparent(this,'2')" id="ck5" value="5">5</li>

<li><input type='checkbox' onClick="ckbparent(this,'2')" id="ck6" value="6">6</li>

<li><input type='checkbox' onClick="ckbparent(this,'2')" id="ck7" value="7">7</li>

<li><input type='checkbox' onClick="ckbparent(this,'2')" id="ck8" value="8">8</li>

</ul>

</div>

       <input type="button" id="baocun" value="取值" onClick="getall('ckball')">

</form>

</body>

</HTML>

相關文章