IDC资讯中心
jquery实现全选的功能非常简单，这里这个例子主要是介绍一下jquery的attr和removeAttr两个方法的应用。这里有两个jquery实现全选的方法，都通过了测试，把以下的代码保存为html文件，双击打开就可以看到效果了，测试一个写法是否正确，需要把另一个写法的代码注释掉，使用/* */来注释。
<script src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//写法一
//全选或全不选
/*$("#chkAll").click(function () {//当点击全选框时
var flag = $("#chkAll").attr("checked");//判断全选按钮的状态
$("[name='Item']").each(function(){
$(this).attr("checked",flag);
});
}); */
//写法二
$("#chkAll").click(function () {//当点击全选框时
var flag = $("#chkAll").attr("checked");//判断全选按钮的状态
$("[name='Item']").each(function(){
if(flag)
{
$(this).attr("checked","checked"); //设置选中
}
else
{
$(this).removeAttr("checked"); //去掉选中
}
});
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="200" border="1">
<tr>
<td><input type="checkbox" name="Item" id="chkAll" />
全选 </td>
<td>内容</td>
</tr>
<tr>
<td><input type="checkbox" name="Item" id="checkbox2" />
1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="Item" id="checkbox3" />
2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="Item" id="checkbox3" />
3</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="Item" id="checkbox3" />
4</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="Item" id="checkbox3" />
5</td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" name="Item" id="checkbox3" />
6</td>
<td>6</td>
</tr>
<tr>
<td><input type="checkbox" name="Item" id="checkbox3" />
7</td>
<td>7</td>
</tr>
</table>
</form>
(鼠标移到代码上去，在代码的顶部会出现四个图标，第一个是查看源代码，第二个是复制代码，第三个是打印代码，第四个是帮助)
