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="" 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(代码示例)的更多相关文章
- Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
- jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效
好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...
- jQuery 全选和反选demo
前段时间做了一个全选和反选的功能,最近不忙了,做了一个简化版的demo. 全部代码如下: <!DOCTYPE html> <html> <head> <tit ...
- JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单
<!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...
- jQuery全选与反选,且解决点击只执行一次的问题
<html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...
- 基于jquery 全选、反选、各行换色、单击行选中事件实现代码
<script language="javascript"> $(document).ready(function(){ //各行换色 $('table tr:odd' ...
- Jquery 全选、反选
jQuery 1.9以后用 prop(); 不用attr 等 $(function() { $('#inputCheck').click(function() { $("input[name ...
- jQuery全选、反选、全不选
原文链接:https://yq.aliyun.com/articles/33443 HTML内容部分: <ul id="items"> <li> <l ...
- Jquery 全选、反选问题的记录
<div id="list"> <ul id="choseList" > <li><input type=" ...
随机推荐
- 转《本文为腾讯Bugly原创文章 ---全站 HTTPS 来了》
最近大家在使用百度.谷歌或淘宝的时候,是不是注意浏览器左上角已经全部出现了一把绿色锁,这把锁表明该网站已经使用了 HTTPS 进行保护.仔细观察,会发现这些网站已经全站使用 HTTPS.同时,iOS ...
- 基于SharePoint 的企业信息平台架构
- HDU 5961 传递 【图论+拓扑】 (2016年中国大学生程序设计竞赛(合肥))
传递 Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem ...
- Colour your Log4Net events in your RichTextBox zz
You’re most probably here because you have already read my article How to watch your log through you ...
- Jquery扩展- 倒计时
Source Code (function($) { $.fn.countdown = function(options) { // default options var defaults = { ...
- 洛谷1373 小a和uim之大逃离
洛谷1373 小a和uim之大逃离 本题地址:http://www.luogu.org/problem/show?pid=1373 题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北 ...
- pac 文件使用到的javascript函数
下面是可用于FindProxyForURL()函数体中的条件函数: 基于主机名的函数: isPlainHostName() dnsDomainIs() localHostOrDomainIs() is ...
- java实现简单的文件筛选
package filenameFilter; import java.io.File; /* * 实现功能: * 获取指定路径下的指定格式的文件; * */ public class Test { ...
- LCS算法
转自:http://hzzy-010.blog.163.com/blog/static/79692381200872024242126/ 好详细~~~也十分好理解~~~ 最长公共子序列问题(非连续的 ...
- SSO之CAS备忘
http://blog.chinaunix.net/uid-28380443-id-4740103.html 自己负责的公司基于CAS单点登录平台架构已经上线运行,很多细节的东西是时候备忘一下了,开源 ...