Jquery全选与反选checkbox(代码示例)
2024-10-18 13:27:49
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏;
这个功能实现思路如下:
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:刚刚又修改了一段代码:一个一个选中,如果全部选中时,全选按钮要选中。
最新文章
- kali 安装ss代理客户端的方法(纯属个人总结)
- 【日记】thinkphp项目阿里云ECS服务器部署
- [MEMO]: 机器学习教父级别的任务Jordan推荐的书籍
- 使用Excel对象模型在Excel单元格中设置不同的字体
- Linux.BackDoor.Chikdos/Elknot Attack And Defense Analysis
- bootstrap笔记-布局
- Calculating simple running totals in SQL Server
- Android IOS WebRTC 音视频开发总结(二九)-- 安卓噪声消除交流
- DTAP street
- C#控制台程序 使用 Server.MapPath,
- C# Socket TCP Server &; Client &; nodejs client
- Openjudge-计算概论(A)-求特殊自然数
- 自定义类使用泛型and方法使用泛型
- java.lang.RuntimeException: com.netflix.client.ClientException: Load balancer does not have available server for client: service-one
- Servlet 生命周期、工作原理-是单实例多线程
- 利用word的VBA,为代码统一表格宽度,底色及行号
- 深入理解Linux内核-内存管理
- [ps] 灰度和通道基础知识
- bzoj1072排列
- python中的基本数据类型(int,bool,str)及字符串操作
热门文章
- Nginx 安装成 Windows 服务
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!
- ASP.NET中验证控件的使用
- GridControl 列中显示图片 z
- UVA 10256 The Great Divide (凸包,多边形的位置关系)
- AsyncSocket的使用
- [ZETCODE]wxWidgets教程五:布局管理
- python爬虫学习(3)_模拟登陆
- 《A First Course in Probability》-chape4-离散型随机变量-几种典型分布列
- hdoj 1873 看病要排队【优先队列】