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=" ...
随机推荐
- 【转】iOS开发者申请发布证书及真机调试图文详解
原文网址:http://www.tqcto.com/article/mobile/57822.html 打开iOS Dev Center,选择Sign in,登陆(至少99美元账号),登陆之后在网页右 ...
- Makefile自动生成头文件依赖
前言 Makefile自动生成头文件依赖是很常用的功能,本文的目的是想尽量详细说明其中的原理和过程. Makefile模板 首先给出一个本人在小项目中常用的Makefile模板,支持自动生成头文件依赖 ...
- opengl学习
#include"stdafx.h" #define GLUT_DISABLE_ATEXIT_HACK #include <GL/glut.h> //glut自动将gl ...
- A. Difference Row
A. Difference Row time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- Toad for Oracle 使用文档
Toad®for Oracle 版本 12.0.1 发行说明 30 July 2013 目录 欢迎使用 Toad for Oracle 版本更新 解决的问题和改进 已知问题 第三方已知问题 升级和兼容 ...
- Oracle体系结构图
1 oracle数据库主要有数据文件database和数据库实例instance组成.用户通过用户进程链接到server process.在数据库启动的时候,需要依赖于参数文件parameter fi ...
- vijosP1037搭建双塔
vijosP1037搭建双塔 链接:https://vijos.org/p/1037 [思路] DP. [代码] #include<iostream> #include<cstrin ...
- Microsoft Dynamics CRM 2011 相关-摘自网络
Microsoft Dynamics CRM Server 2011硬件需求: 组件 *最低要求 *推荐配置 处理器 x64 体系结构或兼容的双核 1.5 GHz 处理器 四核 x64 体系结构 2 ...
- linux 下信号处理命令trap && linux下各种信号的意义
1.用途说明 trap是一个shell内建命令,它用来在脚本中指定信号如何处理.比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是退出 ...
- VirtualBox安装Ghost XP
http://jingyan.baidu.com/album/5d368d1e1a88b73f60c05721.html?picindex=1