Jquery全选与反选checkbox（代码示例）
今天在公司要实现操作权限的功能，需要根据左边的树，选择一项，判断右边的操作权限，例如，增加，修改，删除，查看等按钮的显示与隐藏；
这个功能实现思路如下：
1、操作权限：增加、修改等按钮的ID和Text是保存在xml文件中；
2、选择一项，加载xml文件中的按钮数据，显示在右边的页面，以checkbox展示；
3、全选checkbox，则选择所有的checkbox，取消则一个则全选按钮也取消选中；
4、将list集合转成json格式，传输到后台保存，后台每次增加与修改都会判断是否存在，不存在则新增，存在则修改；
整个功能都已实现，全选功能参考了网上的代码。
自己补充代码：选中一个后，全选按钮要取消选中；
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckAll_Example.aspx.cs" Inherits="FormEditor.CheckAll_Example" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery全选与反选checkbox</title>
<script src="Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div class="divCheckAll">
<input type="checkbox" name="chk_list" id="chk_list_1" value="" onclick="IsCheckAll()" /><br />
<input type="checkbox" name="chk_list" id="chk_list_2" value="" onclick="IsCheckAll()" /><br />
<input type="checkbox" name="chk_list" id="chk_list_3" value="" onclick="IsCheckAll()" /><br />
<input type="checkbox" name="chk_list" id="chk_list_4" value="" onclick="IsCheckAll()" /><br />
</div>
<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
$("#chk_all").click(function () {
$("input[name='chk_list']").prop("checked", $(this).prop("checked"));
}); function IsCheckAll() {
var totalCount = $(".divCheckAll").find("input[name='chk_list']").length;
var count = ;
$(".divCheckAll").find("input[name='chk_list']").each(function () {
//选中加一
if ($(this).prop("checked")) {
count++;
}
});
if (count < totalCount) {
$("#chk_all").prop("checked", false);
} else {
$("#chk_all").prop("checked", true);
}
}
</script>
</body>
</html>
PS：刚刚又修改了一段代码：一个一个选中，如果全部选中时，全选按钮要选中。
Jquery全选与反选checkbox（代码示例）的更多相关文章
- Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
- jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效
好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...
- jQuery 全选和反选demo
前段时间做了一个全选和反选的功能,最近不忙了,做了一个简化版的demo. 全部代码如下: <!DOCTYPE html> <html> <head> <tit ...
- JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单
<!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...
- jQuery全选与反选，且解决点击只执行一次的问题
<html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...
- 基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...
- Jquery 全选、反选
jQuery 1.9以后用 prop(); 不用attr 等 $(function() { $('#inputCheck').click(function() { $("input[name ...
- jQuery全选、反选、全不选
原文链接:https://yq.aliyun.com/articles/33443 HTML内容部分: <ul id="items"> <li> <l ...
- Jquery 全选、反选问题的记录
<div id="list"> <ul id="choseList" > <li><input type=" ...
随机推荐
- 使用表达式避免拼接SQL语句
在SQL语句编写过程中,无论在存储过程中还是在程序中,有时为了使语句兼容全部情况与某字段的特殊情况,不得不拼接SQL字串 如下表 商品ID 类别ID 1 1 2 1 3 2 4 3 5 3 如果我们要 ...
- HDOJ --- 1159 Common Subsequence
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Bootstrap框架中的字形图标的理解
最近项目中准备使用 Bootstrap 框架,看中了Ace Admin 这套皮肤,看其代码的时候,发现使用了字形图标.下面内容来源于网络,根据自己对新知识的学习曲线重新整合了一下: 一,字形图标的定义 ...
- HDOJ/HDU 1242 Rescue(经典BFS深搜-优先队列)
Problem Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is ...
- octopress Endless Error With Gem Dependencies
因为重装系统的缘故,需要重新搭建octopress环境,在执行到: bundle install 会出现一些这样的错误:An error occurred while installing timer ...
- Hadoop--Map/Reduce实现多表链接
MR实现多表连接的原理和单表连接时一样的,甚至比单表连接还要简单. 在map阶段只需要根据文件的名称区分左表还是右表.使用关联的字段作为key2. 在reduce中对values中的值分别存储到一个左 ...
- ThinkPHP 快速入门
1. 框架简介 框架是程序结构代码的集合,而不是业务逻辑代码.集合中包含了很多类.函数和功能类包.这个集合是按照一定标准组成的功能体系.体系有很多设计模式,比如MVC等. 2. ThinkPHP框架学 ...
- POJ 3125 Printer Queue
题目: Description The only printer in the computer science students' union is experiencing an extremel ...
- pg_dump实例详解(备份postgresql和greenplum数据库)
一.pg_dump的用法:数据库的导入导出是最常用的功能之一,每种数据库都提供有这方面的工具,例如Oracle的exp/imp,Informix的dbexp/dbimp,MySQL的mysqldump ...
- getaccesstoken方法
通过appid和appsecret获取access_token的定义函数 这里用的是memcache缓存存储用户信息7000秒 <?php function getAccessToken($ap ...