zoukankan      html  css  js  c++  java
  • 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="1" onclick="IsCheckAll()" />1<br />
            <input type="checkbox" name="chk_list" id="chk_list_2" value="2" onclick="IsCheckAll()" />2<br />
            <input type="checkbox" name="chk_list" id="chk_list_3" value="3" onclick="IsCheckAll()" />3<br />
            <input type="checkbox" name="chk_list" id="chk_list_4" value="4" onclick="IsCheckAll()" />4<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 = 0;
                $(".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:刚刚又修改了一段代码:一个一个选中,如果全部选中时,全选按钮要选中。

  • 相关阅读:
    向net core 3.0进击——多平台项目发布与部署
    Linux配置部署_新手向(五)——Docker的安装与使用
    Ubuntu 18.04使用OpenSSL自签证书(证书支持多IP及多域名,谷歌浏览器无警告)
    学习makefile的一个工程示例
    Centos7下设置ceph 12.2.1 (luminous)dashboard UI监控功能
    一个小例子学习makefile
    Centos7下部署ceph 12.2.1 (luminous)集群及RBD使用
    VMware Centos7 桥接 DHCP无法获得IP
    VMware Centos7 NAT 无法上网的解决方法
    jerasure 2.0译文
  • 原文地址:https://www.cnblogs.com/renzaijianghu/p/3484647.html
Copyright © 2011-2022 走看看