怎样实现复选框 全选和反选的效果

[zhangpan816]

高手请指点，谢谢！

[kafly]

JS实现的。

[itzhiren]

循环,js

[jajaidandan]

function checkAll(e, itemName)
{
var aa = document.getElementsByName(itemName);
for (var i=0; i<aa.length; i++)
aa[i].checked = e.checked;
}

[kafly]

<table>
<tr>
<td width="3%"><input id="delall" onclick="var obj=document.getElementsByName('delid');for(var i=0;i<obj.length;i++)obj[i].checked=this.checked" type="checkbox" value="true" name="delall" />全选</td>
</tr>
<tr>
<td><input id="delid" type="checkbox" value="7" name="delid" />AAA</td>
</tr>
<tr>
<td><input id="delid" type="checkbox" value="4" name="delid"/>BBB</td>
</tr>
</table>

[kafly]

全选+反选


<script for="select" event="onclick">
if (event.srcElement.action == 'invert') {
for (var i=0; i<this.elements.length; i++) {
var e = this.elements[i];
if (e.type == 'checkbox' && e.action != 'invert' && e.action != 'alls')
e.checked = !e.checked;
}}

if (event.srcElement.action == 'alls') {
for (var i=0; i<this.elements.length; i++) {
var e = this.elements[i];
if (e.type == 'checkbox' && e.action != 'invert' && e.action != 'alls')
e.checked = true;
}}
</script>

<form name="select">
<table>
<tr>
<td width="3%"><input type="checkbox" action="alls">全选　　<input type="checkbox" action="invert">反选<br></td>
</tr>
<tr>
<td><input id="delid" type="checkbox" value="7" name="delid" />AAA</td>
</tr>
<tr>
<td><input id="delid" type="checkbox" value="4" name="delid"/>BBB</td>
</tr>
</table>
</form>

[kafly]

这样好看一点？

<script for="select" event="onclick">
if (event.srcElement.action == 'invert') {
for (var i=0; i<this.elements.length; i++) {
var e = this.elements[i];
if (e.type == 'checkbox' && e.action != 'invert' && e.action != 'alls')
e.checked = !e.checked;
}}

if (event.srcElement.action == 'alls') {
for (var i=0; i<this.elements.length; i++) {
var e = this.elements[i];
if (e.type == 'checkbox' && e.name == 'news')
e.checked = true;
}}
</script>

<form name="select">
<table>
<tr>
<td width="3%"><input type="button" value="全选" action="alls">　　<input type="button" value="反选" action="invert"></td>
</tr>
<tr>
<td><input name="news" type="checkbox" value="7">1、AAA</td>
</tr>
<tr>
<td><input name="news" type="checkbox" value="4">2、BBB</td>
</tr>
<tr>
<td><input name="news" type="checkbox" value="4">3、CCC</td>
</tr>
</table>
</form>

[zhangpan816]

谢谢！