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:刚刚又修改了一段代码:一个一个选中,如果全部选中时,全选按钮要选中。

原文地址:https://www.cnblogs.com/renzaijianghu/p/3484647.html