首页 / JQUERY / 基于JQuery实现CheckBox全选全不选

基于JQuery实现CheckBox全选全不选

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于JQuery实现CheckBox全选全不选，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2016字，纯文字阅读大概需要3分钟。

内容图文

所以我就参照网上的例子试着自己写了一个，达到了自己想要的效果，其实这也是一个很简单的例子，其中有不足的地方还望大家能够给予指出。
下面把代码贴出来给大家看看
代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkAll.aspx.cs" Inherits="checkAll" %> 
<!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.5.2.js" type="text/javascript"></script> 
<script src="Js/jquery-1.5.2.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function () { 
//全选或全不选 
$("#chkAll").click(function () {//当点击全选框时 
var flag = $("#chkAll").attr("checked");//判断全选按钮的状态 
$("[id$='Item']").each(function () {//查找每一个Id以Item结尾的checkbox 
$(this).attr("checked", flag);//选中或者取消选中 
}); 
}); 
//如果全部选中勾上全选框，全部选中状态时取消了其中一个则取消全选框的选中状态 
$("[id$='Item']").each(function () { 
$(this).click(function () { 
if ($("[id$='Item']:checked").length == $("[id$='Item']").length) { 
$("#chkAll").attr("checked", "checked"); 
} 
else $("#chkAll").removeAttr("checked"); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chkAll" runat="server" Text="全选"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk1_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk2_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk3_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk4_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk5_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk6_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk7_Item" runat="server"/> 
</td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html>

内容总结

以上是互联网集市为您收集整理的基于JQuery实现CheckBox全选全不选全部内容，希望文章能够帮你解决基于JQuery实现CheckBox全选全不选所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/369310.html

来源：【匿名】