<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>check test</title>
</head>
<body>
<form name="formGroup" id="formGroup" action="#" method="post" target="_self">
<table border="1" cellpadding="2" cellspacing="1" class="table_hide">
<tr class="table_title">
<td width="50" align="center" class="text_center">序号</td>
<td width="40" align="center" class="text_center">选择</td>
<td width="100" align="center"></td>
<td width="100" align="center"></td>
</tr>
<tr>
<td align="center" class="text_center">1</td>
<td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center" class="text_center">2</td>
<td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center" class="text_center">3</td>
<td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">全选</td>
<!-- 复选框单击方式 -->
<td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form)return false" value=""></td>
<!-- 按钮方式,本质无区别 -->
<td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form)return false" value="选/反选"></td>
<td align="center"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
// 选择或者反选 checkbox
function CheckSelect(thisform)
{
// 遍历 form
for ( var i = 0 i < thisform.elements.length i++)
{
// 提取控件
var checkbox = thisform.elements[i]
// 检查是否是指定的控件
if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)
{
// 正选
checkbox.checked = true
}
else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)
{
// 反选
checkbox.checked = false
}
}
}
</script>
</html>
运行效果:
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
window.onload=function()
{
var arr =document.getElementsByTagName('input')
var b = document.getElementById("btu")
var iSelect=true
b.onclick=function()
{
if(iSelect==true)
{
for(var i=0i<arr.lengthi++)
{
arr[i].checked=true
}
iSelect=false
b.value='反选'
}
else if(iSelect==false)
{
for(var i=0i<arr.lengthi++)
{
arr[i].checked=false
}
iSelect=true
b.value='全选'
}
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" value="读书" name="like" />读书<br />
<input type="checkbox" value="看书" name="like" />看书<br />
<input type="checkbox" value="写书" name="like" />写书<br />
<input type="checkbox" value="听书" name="like" />听书<br />
<input type="button" id="btu" value="全选" />
</form>
</body>
</html>
你错的有点不合理啊,首先js是类c语言,但是一种弱语言,定义变量是用var 你用的是int。其次var b=document.getElementById("btu")b是你选取的元素对象,你怎么就可以直接用来判断(b=="全选")这是不对的。我在你的基础上改好了,你自己好好看看吧
var div=document.getElementById(div的id)var chks=div.getElementsByName(checkbox的name)//checkbox设为同一个name
for(var i=0i<chks.lengthi++){
chks[i].checked//全选
chks[i].checked=!chks[i].checked //反选
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)