您的位置：首页 > 其它

checkbox的全选/反选功能、支持不同组内的checkbox全选/反选

2010-09-29 17:00 483 查看
还在念书时候，作业碰到checkbox的全选反选问题，当时随便解决了下全选功能。但在不同组外全选功能就没有去思考。今天写了个，算是把以前的作业补充完整。

function checkAll(gv,cboxID)
{

var id=document.getElementById(cboxID);
var g=document.getElementById(gv);
var cbox=g.getElementsByTagName("input");
for(var i=0;i<cbox.length;i++)
{
if(cbox[i].type=="checkbox")
{
cbox[i].checked=id.checked;
}
}
}


/*-----------------下面是全部代码-----------*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checkbox</title>
<mce:script type="text/javascript"><!--
function checkAll(gv,cboxID)
{

var id=document.getElementById(cboxID);
var g=document.getElementById(gv);
var cbox=g.getElementsByTagName("input");
for(var i=0;i<cbox.length;i++)
{
if(cbox[i].type=="checkbox")
{
cbox[i].checked=id.checked;
}
}
}
// --></mce:script>
</head>
<body>
<div id="giew" style="border:1px solid red; width:400px;">
<input type="checkbox" name="cbox" id="cbox" onclick="checkAll('giew','cbox');"/>全选/反选<br />
<input type="checkbox" name="cbox" /><br />
<input type="checkbox" name="cbox" /><br />
<input type="checkbox" name="cbox" /><br />
<input type="checkbox" name="cbox" /><br />
</div>
<div id="giew2" style="border:1px solid orange; width:400px; margin-top:30px">
<input type="checkbox" name="cbox1" id="cbox1" onclick="checkAll('giew2','cbox1');"/>全选/反选<br />
<input type="checkbox" name="cbox1" /><br />
<input type="checkbox" name="cbox1" /><br />
<input type="checkbox" name="cbox1" /><br />
<input type="checkbox" name="cbox1" /><br />
</div>

</body>
</html>


有更好办法的，请前辈门指点下，谢谢。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航