基于JQuery实现CheckBox全选全不选

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


代码如下:

<%@ 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>

赞 (0)

相关推荐

  • jQuery操作checkbox选择(list/table)

    jQuery操作checkbox选择(list/table)

    1.checkbox list选择 效果图: 代码: 复制代码 代码如下: <!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

  • checkbox 选中一个另一个checkbox也会选中的实现代码

    checkbox 选中一个另一个checkbox也会选中的实现代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <head> <meta http-equiv='content-type' content

  • jQuery实现table中两列CheckBox只能选中一个的示例

    jQuery实现table中两列CheckBox只能选中一个的示例

    //html <table id="unit"> <tr> <th>选项一</th> <th>选项二</th> <th>姓名</th> </tr> <tr> <td><input type="checkbox" /></td> <td><input type="checkbox&quo

  • JQuery限制复选框checkbox可选中个数的方法

    本文实例讲述了JQuery限制复选框checkbox可选中个数的方法.分享给大家供大家参考.具体分析如下: 由于项目需要限制可批量操作的文件个数 所以写了一段小代码 如果选中个数大于允许的最大个数 其他复选框不能选择 如果小于则所有复选框都能选择 <script type="text/javascript"> $(document).ready(function() { $('input[type=checkbox]').click(function() { $("

  • jquery checkbox实现单选小例

    复制代码 代码如下: $(function(){ $(':checkbox[name=flag]').each(function(){ $(this).click(function(){ if($(this).attr('checked')){ $(':checkbox[name=flag]').removeAttr('checked'); $(this).attr('checked','checked'); } }); }); }); <input name="flag" id

  • 基于jQuery的checkbox全选问题分析

    本文实例分析了基于jQuery的checkbox全选问题.分享给大家供大家参考,具体如下: 最近开发项目时遇到一个很奇怪的问题,就是checkbox的全选与全不选 使用jQuery的框架.一直是使用 //检测选中的checkbox $('input[name="abc"]:checked').each(function(){}) 但是,发现我需要全选的时候,使用 $('input[name="abc"]').attr('checked',true); $('inpu

  • 基于jquery实现的自动补全功能

    本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $(function() {     // 自动补全     var maxcount = 0;// 表示他最大的值     var thisCount =0;// 初始化他框的位置     $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos

  • 基于JQuery实现CheckBox全选全不选

    所以我就参照网上的例子试着自己写了一个,达到了自己想要的效果,其实这也是一个很简单的例子,其中有不足的地方还望大家能够给予指出.下面把代码贴出来给大家看看 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkAll.aspx.cs" Inherits="checkAll" %> <!DOCTYPE html PUBLI

  • jQuery实现checkbox列表的全选、反选功能

    jQuery实现checkbox列表的全选、反选功能

    我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: $(':checkbox[data-check-target]').click(function () { var target = $(this).attr(

  • 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage

    先给大家展示效果图如下所示: 使用方法: 首先在head区引入jquery.js,jquery-ui.js,fullPage.js以及样式文件jquery.fullPage.css <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="

  • 基于jquery的checkbox下拉框插件代码

    option_check.js代码 : 复制代码 代码如下: /***************************************** 调用方法为: Jselect($("#inputid"),{ bindid:'bindid', hoverclass:'hoverclass', optionsbind:function(){return hqhtml();} }); inputid为下拉框要绑定的文本框id bindid为点击弹出/收回下拉框的控件id hoverclas

  • jquery中checkbox使用方法简单实例演示

    jquery中checkbox使用方法简单实例演示

    和大家分享一段基于jQuery实现checkbox列表全选.反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等).文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的前端开发爱好者. 引入jquery库 <script src="ajax/libs/jquery/1.10.2/jquery.min.js"></script> 构建HTML 一般从数据库读出来的列表都需要批量选中以便删除与编辑等,下面我们就来模拟下,

  • 原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数. 功能介绍点此查看DEMO演示 1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改 全选/全不选 选框的状态, 即列

  • jquery写个checkbox——类似邮箱全选功能

    以前用原生 JS 写过 checkbox--类似邮箱全选功能,点击这里.最近在学习jquery,今天抽空用jquery 写个checkbox--类似邮箱全选功能. 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> &l

  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

随机推荐