CheckBox选中所有的项(非Jquery版)

<html>
<head>
<title>
</title>
<body>
<form name=”Form1″>

<input name=”allbox” type=”checkbox” onClick=”TA();” title=”选中或清除选中所有的项目” tabindex=”105″>选中或清除选中所有的项目

<br/>
<span class=”X”>
<input type=”checkbox” name=”ABC” class=”A” onClick=”TTA(this);”>清明时节</span>
<br/>
<span class=”X”>
<input type=”checkbox” name=”DEF” class=”A” onClick=”TTA(this);”>长江水啊</span>
<br/>
<span class=”X”>
<input type=”checkbox” name=”GHL” class=”A” onClick=”TTA(this);”>嘿嘿测试</span>
<br/>
</form>

<script language=”javascript”>
var frm = document.Form1;
</script>
<script language=”JavaScript”>

function TA(isO,noHL){
var trk = 0;

for(var i=0;i<frm.elements.length;i++){
var e=frm.elements[i];

if((e.name !=’allbox’) && (e.type == ‘checkbox’)){
e.checked = frm.allbox.checked;
if (frm.allbox.checked){
//e.parentElement.className = “H”; //.parentElement不兼容firefox浏览器
e.parentNode.className = “H”;//调用设置父节点元素class改变背景色

}else{
e.parentNode.className = “X”;//调用设置父节点元素class改变背景色
}
}
}
}

function TTA(CB,noHL){
if (CB.checked){
CB.parentNode.className = “H”;
}else{
CB.parentNode.className = “X”;
}

var TB=TO=0;
for (var i=0;i<frm.elements.length;i++){
var e=frm.elements[i];
if ((e.name != ‘allbox’) && (e.type==’checkbox’)){
TB++;
if (e.checked)
TO++;
}
}
frm.allbox.checked=(TO==TB)?true:false;
//如果不是所有项被选中则allbox设定未被选中
}
</script>

<style>
.H{
background: #ADD8E6
}
.X{
background: #FFFFFF
}

</style>
</body></html>

原创文章,转载请注明: 转载自海波无痕

本文链接地址: CheckBox选中所有的项(非Jquery版)

文章的脚注信息由WordPress的wp-posturl插件自动生成

此条目发表在javaee分类目录,贴了, , , , , 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论链接可以 移除 nofollow.