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

这个功能实现思路如下：

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. （转载）CSS分别设置Input样式（按input类型）

    (转载)http://www.uml.org.cn/html/201207202.asp   当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框? ...

  2. HDOJ/HDU 1804 Deli Deli(英语单词复数形式~)

    Problem Description Mrs. Deli is running the delicatessen store "Deli Deli". Last year Mrs ...

  3. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

  4. （DT系列四）驱动加载中, 如何取得device tree中的属性

    本文以At91rm9200平台为例,从源码实现的角度来分析驱动加载时,Device tree的属性是如何取得的.一:系统级初始化DT_MACHINE_START 主要是定义"struct m ...

  5. （DT系列三）系统启动时, dts 是怎么被加载的

    一,主要问题:系统在启动的时候,是怎么加载 dts的:Lk,kernel中都应调查. 二:参考文字dts加载流程如下图所示: 启动过程中,bootloader(默认是bootable/bootload ...

  6. Vi和Vim的区别及联系

    它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面.vim的这些优势主要体现在以下几个方面:1.多级撤消我们知道在vi里,按 u只能撤消上次命 ...

  7. 字符编码笔记：ASCII，Unicode和UTF-8，附带 Little endian和Big endian的解释

    作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步 ...

  8. Java-String之寻根问底

    Java-String之寻根问底 引言 在java编程中,几乎每天都会跟String打交道,因此,深入理解String及其用法十分有必要.下面分三方面来详细说明下String相关的特点及用法 •Imm ...

  9. hdoj 1509 Windows Message Queue【优先队列】

    Windows Message Queue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...

  10. selenuim +python环境配置遇到的诸多问题

    自动化测试入门,总结一下安装selenium.python以及配置webdriver遇到的问题: 准备工作: 1.下载火狐浏览器并安装插件selenium IDE.Firebug~~ 2.下载安装py ...