今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏;

这个功能实现思路如下:

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(代码示例)的更多相关文章

  1. Jquery 全选、反选问题解析

    最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...

  2. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  3. jQuery 全选和反选demo

    前段时间做了一个全选和反选的功能,最近不忙了,做了一个简化版的demo. 全部代码如下: <!DOCTYPE html> <html> <head> <tit ...

  4. JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

    <!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...

  5. jQuery全选与反选,且解决点击只执行一次的问题

    <html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...

  6. 基于jquery 全选、反选、各行换色、单击行选中事件实现代码

    <script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...

  7. Jquery 全选、反选

    jQuery 1.9以后用 prop(); 不用attr 等 $(function() { $('#inputCheck').click(function() { $("input[name ...

  8. jQuery全选、反选、全不选

    原文链接:https://yq.aliyun.com/articles/33443 HTML内容部分: <ul id="items"> <li> <l ...

  9. Jquery 全选、反选问题的记录

    <div id="list"> <ul id="choseList" > <li><input type=" ...

随机推荐

  1. GeoServer地图开发解决方案

    转自:http://www.cnblogs.com/beniao/archive/2011/01/08/1930822.html GeoServer 是 OpenGIS Web 服务器规范的 J2EE ...

  2. 关于MySQL的分区(partion)

    1 CREATE TABLE part_tab ( c1 int default NULL, c2 ) default NULL, c3 date default NULL ) engine=myis ...

  3. CPSR和SPSR(转)

    转载地址:http://blog.chinaunix.net/uid-28458801-id-3487199.html CPSR:程序状态寄存器(current program status regi ...

  4. MSW下wxWidgets的安装与编译

    教程摘自网上各大博客.贴吧.论坛,结合自己的实践做了一些实质性的修改. 一.安装 首先从http://sourceforge.net/projects/wxwindows/files/2.8.12/w ...

  5. HW4.19

    public class Solution { public static void main(String[] args) { for(int i = 1; i <= 8; i++) { fo ...

  6. [LeetCode] Subsets I (78) & II (90) 解题思路,即全组合算法

    78. Subsets Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a ...

  7. 【转】shell 教程——02 几种常见的Shell

    上面提到过,Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说 ...

  8. BAT-使用BAT方法判断网络启动EXE(快捷方式)

      原理思路:先启动iNode,如果访问www.baidu.com成功,证明网通了,这时就启动GXT和邮件等.PS:因为对BAT不清楚,所以自己写的东东可能有问题,希望大家有了解BAT的,看一下是否正 ...

  9. sqlserver优化查询

    sql语句的优化分析   开门见山,问题所在 sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语 ...

  10. JDBC连接MySQL数据库

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...