jQuery 版的 CheckBox 复选框成组联动(性能改进版)

Asp.Net TreeView控件的Checkbox集成及联动功能实现 ASP.NET TreeView控件是用于以树状结构展示层级数据的强大UI组件。它允许开发者以声明性和编程性方式创建复杂的层级视图,非常适合于显示具有父子关系的信息,比如文件系统结构、组织架构或任何需要清晰层次展示的数据集合。为了提升用户体验,开发者可以对TreeView控件中的TreeNode对象进行样式自定义。这包括但不限于字体样式、背景颜色、边框样式等。下面是一个使用 CSS 为 TreeNode 自定义样式的示例:/* CSS样式定义 */ 阅读详情

上一个版本的缺点是当组和组成员较多时,性能较差,此版主要是将所有组和组成员缓存,以达到改善性能的目的。


/*

-------------------------
	复选框联动

	www.zhangkai.net
-------------------------

	给复选框添加属性 group="...",则组名相同的复选框会成为一组。
	
	控制组状态的复选框添加属性 forcheckboxgroup="...",就可以控制对应名称的组。
	和组联动的其它元素也可添加属性 forcheckboxgroup="...",当对应的复选框组至少有一个选中时可用,否则不可用。

	例如:
	<label><input type="checkbox" forcheckboxgroup="group_sel"/>全选</label>

	<label><input type="checkbox" group="group_sel"/>选项1</label>
	<label><input type="checkbox" group="group_sel"/>选项2</label>
	...
	<label><input type="checkbox" group="group_sel"/>选项n</label>

	<button type="button" forcheckboxgroup="group_sel">对选中的项目进行操作</button>

*/

$(function () {

	var _jgroupCons = $("[forcheckboxgroup]"), //所有具有 forcheckboxgroup 属性的元素
		_jcheckboxs = $(":checkbox[group]"), //所有具有 group 属性的复选框
		_checkgroups = new Array; //复选框组数组,该数组每一项保存一组由 _jcheckboxs 过滤的复选框组,组名称即是数组项的键

	_jcheckboxs.each(function (i) {
		var _groupname = $(this).attr("group");	//group 是非标准属性,必须由 attr 方法获得值,prop 方法不能获得
		if (!_checkgroups[_groupname]) {
			_checkgroups[_groupname] = _jcheckboxs.filter("[group='" + _groupname + "']");
		}
	});

	//将所有与组关联的非复选框的元素设为无效
	_jgroupCons.filter(":not(:checkbox)").prop("disabled", true).addClass("disabled");

	_jgroupCons.filter(":checkbox")    //选择所有可以控制复选框组状态的复选框
		.change(function () {  // 绑定 change 事件
			var _jthis = $(this),
				forgroupname = _jthis.attr("forcheckboxgroup"); //forcheckboxgroup 是非标准属性,必须由 attr 方法获得值,prop 方法不能获得
			//点击此复选框后只做以下三件事:

			// 1. 设置所控制的复选框组内所有复选框的状态
			_jcheckboxs.filter("[group='" + forgroupname + "']").prop("checked", this.checked);

			// 2. 设置与自己具有相同功能的复选框的状态
			_jgroupCons.filter(":checkbox[forcheckboxgroup='" + forgroupname + "']").prop("checked", this.checked).prop("indeterminate", false);

			// 3. 设置所有与该复选框组相关联的元素的状态
			_jgroupCons.filter("[forcheckboxgroup='" + forgroupname + "']:not(:checkbox)").prop("disabled", !this.checked).toggleClass("disabled", !this.checked);
		});

	_jcheckboxs   //选择所有成组的复选框
		.change(function () {  //绑定 change 事件
			var _jthis = $(this),
				_blnStat = this.checked, //此复选框的选中状态
				_groupname = _jthis.attr("group"), //此复选框所属的组名称,非标准属性,必须由 attr 方法获得值,prop 方法不能获得
				_checkedcount = _checkgroups[_groupname].filter("[checked]").length,//所在组处于选中状态的复选框数量
				_blnEqual =  _checkedcount==0 || _checkedcount == _checkgroups[_groupname].length;    //该组所有成员的选中状态是否相同,即全都选中,或全都未选

			//设置所有可控制该组状态的复选框的状态
			_jgroupCons.filter(":checkbox[forcheckboxgroup='" + _groupname + "']").prop("checked", _blnStat).prop("indeterminate", !_blnEqual);

			//设置所有与组关联的非复选框的元素状态
			_jgroupCons.filter("[forcheckboxgroup='" + _groupname + "']:not(:checkbox)").prop("disabled", !(_blnStat || !_blnEqual)).toggleClass("disabled", !(_blnStat || !_blnEqual));
		});
});


jQuery.checkboxGroup:checkun的复选框选中jquery lib的一组复选框 jQuery.checkboxGroup 这是一个非常简单的插件,可让您轻松地将某些复选框组合在一起并创建一个主复选框,该主复选框可以选中或取消选中所有从属复选框。 如何使用它 给定一个具有id master的复选框和一个字段集中的某些复选框,您可以使用以下简单脚本通过master控制它们: $('fieldset input[type=checkbox]').checkboxGroup({ master: $('#master') }); 更多文件 除了强制性主服务器之外,您还具有以下可选选项: onAllSelected(masterCheckbox,slaveCheckboxes) Callback, that is called, when all checkboxes are selected onSomeSelected(masterCheckbox,slaveC 立即下载

相关推荐

js 实现 复选框和文本框的联动效果

js 实现 复选框和文本框的联动效果! 值得下载看看!资源免费,大家分享!!

jQuery 版的 CheckBox 复选框成组联动(JavaScript)

普通 JavaScript 版请参见:http://blog.youkuaiyun.com/Triumph/archive/2007/11/29/1907813.aspx 先来看效果:复选框联动全选 111112222233333444445555566666 两个复选框联动全选 111112222233333444445555566666 全选 其它对象联动全选 11

Triumphal 4486

Windows环境下DataEase一站式安装指南(含WSL2+Docker配置)

本文详细介绍了在Windows环境下通过WSL2和Docker快速部署DataEase的完整教程。从WSL2配置、Docker环境搭建到DataEase离线安装,逐步指导用户完成一站式部署,特别适合需要快速搭建数据分析平台的开发者。教程包含常见问题解决方案和性能优化技巧,帮助用户高效使用这款国产开源数据可视化工具。

weixin_42526166的博客 398

Jquery 实现联动复选框

可实现两个主复选框(主复选框 1 和主复选框 2)都能够控制三个相同的联动复选框(联动复选框 1、联动复选框 2、联动复选框 3),同时两个主复选框也能够相互控制状态,并且联动复选框的状态也会反过来影响主复选框的状态。

qq_42755622的博客 266

晶圆测试(Wafer Sort)的核心技术与良率提升策略

晶圆测试(Wafer Sort)是芯片制造中的关键“入学考试”,通过探针台与自动测试设备(ATE)对晶圆上的芯片进行功能与参数测试,筛选不合格芯片以控制成本。本文深入解析了其核心技术,包括自动化视觉系统对准、测试流程优化策略,并探讨如何利用测试数据驱动良率提升,展望了DFT与AI智能测试的未来趋势。

e4f5g6h的博客 519

数据仓库ODS层详解- 功能、设计与最佳实践

数据仓库ODS层是大数据分析的基石,为企业决策提供可靠数据源。本文深入探讨ODS层设计原则、实施要点和最佳实践,涵盖金融、零售等行业应用。重点关注云环境下ODS层部署策略,以及实时数据集成、数据湖技术等创新趋势。文章还分析了数据体量增长、实时性需求等挑战,提供实用解决方案。whether助您构建高效、安全、可扩展的ODS层,为数字化转型奠定坚实基础。#数据仓库 #ODS层 #大数据分析 #云计算 #数据湖

一个8年大数据开发工程师的碎碎念 1万+

jquery checkgroup 一组checkbox的check逻辑封装

网页上不少都会用到checkbox组,也就是一组checkbox,其中一个为checkall,有全选,和全不选的功能。并且当他组员checkbox依次全选时,checkAll也应自动被选中。 逻辑很简单,但以下的扩展封装的很不错。 请参考 checkGroup.js (function($){ $.fn.checkgroup = function(options){ //merge ...

weixin_34396103的博客 242

AGM Supra软件从零到一:国产CPLD工程创建全流程实战解析

本文详细解析了AGM Supra软件在国产CPLD开发中的全流程实战操作,从工程创建到代码开发、编译调试,再到高级技巧与疑难排解。特别对比了Supra与Quartus的差异,提供了工程路径管理、Quartus项目转换、HDL代码规范等实用技巧,帮助开发者高效完成CPLD项目开发。

weixin_29193259的博客 502

React性能优化 渲染20000多条checkbox组件,点击选择checkbox组件的时候特别卡,解决办法

import * as React from 'react'; interface IData { id: number, title: string } interface IState { checkedValues: Set<IData>; data: IData[]; } interface IProps { value: IData, c...

徐同保的专栏 3465

quartus 13.1常见报错解决方法

在使用quartus中会遇到很多由于安装或设置不规范造成的错误。我就目前我遇到的一些错误以及我的解决方法分享给大家,这个文章将会持续更新,如果读者有遇到软件中错误无法解决的问题,也欢迎在评论区留言。 一、编译出现lience错误 在对设计的电路编译时,系统在程序运行3秒内即结束并报错,大概意思为现有的证书不支持编译。这个常见问题源自破解不成功,这里读者很有可能犯的错误是在使用破解器的时候没有区分x86(即32-bit)和x64软件破解器对应的文件夹。 如图所示有两种破解器,分别对应32位和64位的软件,大部

肥宅的博客 3万+

【大模型】SpringBoot整合LangChain4j实现RAG检索实战详解

SpringBoot整合LangChain4j实现RAG检索实战详解

congge 1万+

layui的checkbox的联动设置

//设置只有tid被选中,vid才能可选 form.on('checkbox(tck)',function(data){ if(data.elem.checked){ //$('input[lay-filter="vck'+data.value+'"]').a...

hansem的专栏 1541

Windows 下运行 openclaw 出现“‘openclaw‘ 不是内部或外部命令,也不是可运行的程序或批处理文件“的解决方案

方案适用场景推荐指数检查并手动添加 PATH明确知道全局安装目录,只是没加进PATH⭐⭐⭐⭐⭐pnpm setup 自动配置使用 pnpm 安装,想要省心的自动化方式⭐⭐⭐⭐⭐npx 免安装临时运行快速验证核心程序是否正常,排除法排查⭐⭐⭐⭐清理残留后重装npm/pnpm 混用导致版本混乱⭐⭐⭐⭐改用 WSL2不熟悉 Windows 路径体系,长期使用⭐⭐⭐'openclaw' 不是内部或外部命令这类报错,本质上不是"程序坏了",而是。

一键难忘的博客 1万+

JQuery实现复选框CheckBox的全选、反选、提交操作

对复选框最基本的应用,就是对复选框进行全选、反选和提交等操作。复杂的操作需要与选项挂钩,来达到各种级联反应效果。 【示例】使用Jquery实现复选框CheckBox的全选、反选、提交操作。 (1)创建页面,创建一个表格在表格的第一列中放入一组复选框,并实现复选框的全选、反选、提交操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

pan_junbiao的博客 2626

【Unity动画优化插件】BT - OptiAnimX —— AAA级动画优化框架深度剖析

BT - OptiAnimX 是一款面向 Unity 的高性能动画优化框架,核心目标是解决多角色动画场景中的性能瓶颈问题。该插件对标《战争机器5》和《巫师3》等 AAA 游戏中的动画优化技术,通过一整套自动化与智能化的优化策略,将动画性能提升与视觉质量控制结合在一起。它适用于从移动端、VR 到高端 PC 的多平台项目,尤其在“多人角色 + 高频动画”的场景中表现突出,例如 MMO、开放世界、动作游戏等。BT - OptiAnimX 本质上是一套“动画性能调度系统”,而不仅仅是优化工具。

2403_88403568的博客 433

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

jquery实现复选框联动

input1 input2 input3 input4 $('input[type="checkbox"]').click(function(){ // 获取当前复选框在所有复选框中索引 var index = $('input[type="checkbox"]').index(this); var arrStage = ['input4','input3','inp

daxiang的专栏 9380

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

select 2级联动和checkbox全选框联动

项目中用到的2个小函数,代码中的搜索是将option的值获取,方便我后面进行传输,checkbox的全选框联动中亮点在于其他复选框的数量不等于当前被选中的数量时,全选框checked属性设置为false,其实真正联动起来。 无标题页 #sel1 { margin:8px; border:1px solid #cbd7e0; outline: none; pad

liuzijiang1123的专栏 5806

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

jquery对复选框(checkbox)的操作(精华)

@{   Layout = null;} <!DOCTYPE html> <html><head>  <meta name="viewport" content="width=device-width" />  <title>CheckBoxSelect</title></head><bo...

dianchixu1854的博客 153

html5复选框控制按钮状态,Html5 Checkbox多种状态切换

最近在搞一个权限配置的页面,里面的选项框要实现级联,同时checkbox需要有三种状态:选择,部分选择,不选,搜索找到一篇文章jQuery 版的 CheckBox 复选框成组联动(性能改进版)不过我在浏览器上测试有问题,进行修改代码如下:全选选项1选项2选项n对选中的项目进行操作$("#ww").prop("indeterminate", true);$(function () {var _jgr...

weixin_42519725的博客 971

jquery实现复选框的全选操作

最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。 实现细节如有可改进的地方,不吝赐教。 首先是html部分的代码,这里有一个表格,表格里面有一些选项: 选项1 选项2 选项3 全选

Coding a Life 8754

JQuery对checkbox的操作

对复选框组的全选、全不选、不全选,获取选中的复选框的值的操作 点击全选按钮,复选框组全部选中或者全部取消。 实现全选按钮和复选框组的联动,当复选框组中有一个没有被选中后,那么id=‘checkedAll’的全选按钮应该要取消选中;当复选框组全部选中后,全选按钮也应该被选中。 获取已选中的复选框的值。 1 <!DOCTYPE html> 2 &...

dequan6027的博客 175

JQuery实现的 checkbox 全选、反选。

发现网上写的全选的代码,不是完整的,是有bug的。全选它分几种情况 1. 全选的checkbox选中时,子checkbox全部选中。反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子checkbox被选中的数量一样时,全选checkbox要被选中 //复选框事件 //全选、取消全选的事件 function

Happy in Code 7万+

用jquery实现复选框主从选择

为什么80%的码农都做不了架构师?>>> ...

weixin_33716557的博客 360

js 中一个checkbox联动另一个checkbox

<div class="row"> <div class="col-xs-3"> <div class="form-group"> <label for="doSync" class="control-label col-sm-8" title=""> <span c...

qq_39822451的博客 600

jquery的checkbox

选择上一级元素: parent 选择所有上级元素:parents 选择下一级元素 :children 选择所有后台元素:find 选择同级元素 :siblings 选择前一个元素:prev 选择后一个元素:next $(this).attr("checked",true)//选中,false为取消 $(this).siblings("ul").find("input").attr(

wym1581的专栏 445

基于 jQuery 实现复选框全选与选中项查询功能

全选与反选:通过标题栏的复选框,可以一键选中或取消选中内容区域的所有复选框。联动更新:当内容区域的复选框全部被选中时,标题栏的复选框自动勾选;若有任意一个取消选中,标题栏复选框则取消勾选。选中项查询:点击 “点击查询被勾选的复选框” 按钮,能够获取并展示当前被勾选的复选框数量和具体元素,方便后续数据处理。

Z09111616的博客 1308
上一篇: jQuery 插件:随窗口大小变化的自适应高度元素
下一篇: 幻灯片播放 HTC 组件
Triumph
博客等级 码龄26年 13粉丝 45原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值