Jquery练手 DEMO 全选 取消 反选 复选框 的实现

代码
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 runat="server">
<title>无标题页</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(
function(){
$(
"#Button1").click(function(){
$(
"#form1 :checkbox").each(function(){$(this).attr("checked",true)})})
$(
"#Button2").click(function(){
$(
"#form1 :checkbox").each(function(){
if($(this).attr("checked"))
{
$(
this).attr("checked",false);
}
else
{
$(
this).attr("checked",true);
}
});
})
$(
"#Button3").click(function(){
$(
"#form1 :checkbox").each(function(){$(this).attr("checked",false)})})
})
</script>

</head>
<body>
<form id="form1" runat="server">
<table border="1" style="width: 13%;">
<tr>
<td>
<input id="Checkbox1" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input id="Checkbox2" checked type="checkbox" />
</td>
</tr>
<tr>
<td>
<input id="Checkbox3" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input id="Checkbox4" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input id="Checkbox5" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input id="Checkbox6" type="checkbox" />
</td>
</tr>
</table>
</form>
<input id="Checkbox7" type="checkbox" />
<p>
<input id="Button1" type="button" value="全选" /><input id="Button2"
type
="button" value="反选" /><input id="Button3" type="button" value="取消" /></p>
</body>
</html>

 

posted @ 2010-03-21 23:31  chunchill  阅读(347)  评论(0编辑  收藏  举报