`
dalongxn
  • 浏览: 31927 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2

 
阅读更多
/**
*js控制复选框全选V2.0版本使用说明
*
*修复功能:加入同一页面多个复选框全选控制
*
*1.在页面中引用该js;
*2.在全选框onclick事件中调用doCheck(obj,firstCheckBox)方法:obj:this;firstCheckBox:全选框ID
*3.在全选项onclick事件中调用toChkSon(obj,firstCheckBox)方法:obj:this.checked;firstCheckBox:子项ID
*4.注意:子项ID须存在全选框ID;如:全选框ID为selectAll 则子项id必须存在selectAll字符
*5.获取选中的子复选框调用getCheckValue(firstCheckBox)方法: firstCheckBox:全选框ID
*6.获取选中的复选框值调用getCheckBoValue(firstCheckBox)方法: firstCheckBox:全选框ID (返回value值用;隔开)
*
*@author:张申龙
*@date:20130419 
**/

/**
* 操作全选复选框事件(用于全选复选框)
* obj this
* firstCheckBox 全选的复选框id
**/
function doCheck(obj,firstCheckBox)
{  
	var inputs=document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++)
	{  
		if(inputs[i].type=="checkbox" && inputs[i].id!=firstCheckBox && inputs[i].id.indexOf(firstCheckBox)!=-1) //刷选出所有复选框
		{
			inputs[i].checked=obj.checked; 
		}
	}
}

/**
* 复选框变化  全选按钮变化(用于下面复选框)
* obj this.checked
* firstCheckBox 全选的复选框id
**/
function toChkSon(obj,firstCheckBox)
{
	if(obj==false) //当此复选框未选中 全选为未选
	{
		document.getElementById(firstCheckBox).checked=false;
		return ;
	}

	var chkInputs=getCheckBox(firstCheckBox); //获取所有复选框
	var j=0;
	for(var i=0;i<chkInputs.length;i++)
	{
		if(chkInputs[i].checked==obj)
			j++;
		else
			break;
	}	
	
	if(j==chkInputs.length) //当所有复选框为同一状态时 赋值全选同一状态
		document.getElementById(firstCheckBox).checked=obj;
}

/**
* 获取所有复选框
**/
function getCheckBox(firstCheckBox)
{
	var inputs=document.getElementsByTagName("input");
	var chkInputs=new Array();
	var j=0;
	for(var i=0;i<inputs.length;i++)
	{
		if(inputs[i].type=="checkbox" && inputs[i].id!=firstCheckBox && inputs[i].id.indexOf(firstCheckBox)!=-1) //刷选出所有复选框
		{
			chkInputs[j]=inputs[i];
			j++;
		}
	}
	return chkInputs;
}	

/**
**获取选中复选框值 用;隔开
**/
function getCheckBoValue(firstCheckBox){
	var chkInputs=getCheckValue(firstCheckBox); //获取选中所有复选框
	var values="";
	
	if(chkInputs==null || chkInputs.length==0){
		alert("请选中一项");
	}else{ 
		for(var i=0;i<chkInputs.length;i++){
			values+=chkInputs[i].value+";";
		} 
	}
	return values;
}

/**
* 选中复选框集合
**/
function getCheckValue(firstCheckBox){
	var chkInputs=getCheckBox(firstCheckBox); //获取所有复选框
	var inputArray=new Array();
	if(chkInputs!=null && chkInputs.length>0){
		var j=0;
		for(var i=0;i<chkInputs.length;i++){
			if(chkInputs[i].checked){
				inputArray[j]=chkInputs[i];
				j++;
			}
		}
	}
	return inputArray;
}


 
 

  页面调用如:

 

  1. <html>
  2.     <meta http-equiv="Content-Type" content="text/html" charset="gbk" /> 
  3. <head>
  4.  <script src="checkBox.js" type="text/javascript"></script>
  5. </head>
  6. <body>  
  7. <table>
  8. <tr width="100%">
  9. <td >
  10. 全选高富帅:<input type="checkbox" name="chkMsgId" id="chkMsgId" onclick="doCheck(this,'chkMsgId')" /> <br/>  
  11. 高富帅1:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId1" value="【高富帅1】值1" /> <br/>  
  12. 高富帅2:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId2" value="【高富帅】值2"/> <br/>  
  13. 高富帅3:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId3" value="【高富帅】值3"/> <br/>   
  14. 高富帅4:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId4" value="【高富帅】值4"/> <br/>    
  15. 高富帅5:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');"  id="chkMsgId23" name="chkMsgId5" value="【高富帅】值5"/> <br/>  
  16. </td>
  17. <td width="20%">
  18. </td>
  19. <td style="color:blue;">
  20. 全选白富美2:<input type="checkbox" name="chk2" id="chk" onclick="doCheck(this,'chk2')" /> <br/>  
  21. 白富美1:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk21" name="chk21" value="【白富美】值1" /> <br/>  
  22. 白富美2:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk22" name="chk22" value="【白富美】值2"/> <br/>  
  23. 白富美3:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk23" name="chk23" value="【白富美】值3"/> <br/>   
  24. 白富美4:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk24" name="chk24" value="【白富美】值4"/> <br/>    
  25. 白富美5:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');"  id="chk25" name="chk25" value="【白富美】值5"/> <br/>  
  26. </td>
  27. </tr>
  28. </table>
  29.  
  30. <br/><br/> 
  31. <input type="button" value="获取【高富帅】选中按钮值" onclick="alert(getCheckBoValue('chkMsgId'));"/>
  32. <input type="button" value="获取【白富美】选中按钮值" onclick="alert(getCheckBoValue('chk2'));"/>
  33.      
  34. <br/><br/>
  35. <font  style="color:red;font-size:12px;">
  36. 提示:
  37. 1.点击全选按钮就可以控制全选、反选;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  38. 2.勾选子项可以控制全选按钮;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  39. 3.多个全选复选框id不要存在包含关系;
  40. </font>
  41.   </body>  
  42. </html>

 

 

分享到:
评论

相关推荐

    JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2 .0

    在本项目"JS控制复选框全选、反选,可进行同一页面多个复选框全选控制V2.0"中,我们将探讨如何利用JavaScript实现对复选框(checkbox)的全选、反选功能,并获取选中的复选框的值。这些功能在用户界面中常见于批量...

    layui复选框的全选与取消实现方法

    1. 使用 Layui 的 HTML 结构创建复选框,包括一级全选复选框和二级具体选项复选框。 2. 引入 Layui 的 JavaScript 库,并在文档加载完成后初始化事件监听器。 3. 使用 `form.on` 方法监听复选框的点击事件,根据事件...

    在ASP.NET GridView中使用事件实现累计总数和全选功能

    2. 在GridView的列定义中,添加一个模板列,用于放置全选复选框。 3. 在后台代码中,为GridView绑定`RowDataBound`和`SelectedIndexChanged`事件处理程序。 4. 在`RowDataBound`事件中,计算累计总数并显示在特定列...

    【MIMO通信】基于matlab可重构智能表面MIMO系统速率优化【含Matlab源码 13216期】.zip

    Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    SAE AS85049F+Connector Accessories, Electrical General Specification for+2021-04(1).pdf

    SAE AS85049F+Connector Accessories, Electrical General Specification for+2021-04(1).pdf

    NAVMAT P-9492 .pdf

    NAVMAT P-9492 .pdf

    【黑马 - 产品经理基础入门到实战,2小时项目】-《有货App》产品立项说明书

    内容概要:《有货App》产品立项说明书详细阐述了有货App的产品定位、目标用户、主要功能及市场分析。有货App隶属于YOHO!集团,起初为潮流杂志,逐渐转型为集媒体、零售、活动于一体的潮流营销平台。其核心定位为时尚穿搭,面向20~39岁追求潮流的年轻群体,提供正品国际潮牌、明星潮牌的一站式购买服务,并设有时尚潮流穿搭社区、正品鉴定和二手买卖平台。市场分析表明,全球潮牌市场呈两位数增长,尤其是中国市场增速显著,国潮崛起,95后成消费主力,推动潮牌需求上升。有货App的优势在于丰富的潮牌种类和内容基础,但社区互动少、存在假货现象、物流时效差是其劣势。产品规划分为四个版本迭代,逐步完善电商、正品鉴定、社区互动及二手买卖功能。 适合人群:20~39岁追求时尚穿搭、潮流生活的年轻群体,包括上班族、学生及时尚爱好者。 使用场景及目标:①满足用户一站式购买全球潮流品牌的需求;②提供时尚潮流穿搭社区,供用户分享交流穿搭心得;③确保用户购买正品,提供专业的正品鉴定服务;④搭建二手交易平台,方便用户出售或购买二手潮牌服饰。 阅读建议:此文档详细介绍了有货App的市场背景、产品定位及功能规划,适合产品经理、市场分析师及相关从业人员阅读,以了解潮牌电商市场的发展趋势及有货App的竞争策略。

    C#实现485转Web API服务器框架:集成IoT与高性能高并发服务

    内容概要:本文介绍了一款基于C#编写的485转Web API服务器框架,该框架集成了IoT技术和高性能高并发特性。框架主要特点包括强大的数据库支持(EF6+mssql),独立的WEB API服务,丰富的协议扩展性(支持Modbus、Modbus RTU等),便捷的MVC服务与硬件驱动,创新的设备轮询机制,灵活的API任务管理和便捷的运行与配置。此外,框架提供了完备的文档和技术支持,并进行了多项升级,如自适应服务规则、一键启动与自动配置、修复数据读取问题、设备标识增强和开放数据事件接口等。 适合人群:具备一定编程基础,尤其是熟悉C#和IoT技术的开发人员,适用于工业物联网系统的集成和开发。 使用场景及目标:该框架主要用于工业物联网项目的快速落地,特别是在需要高性能和灵活扩展的应用场景中。它可以用于构建能够处理大量并发连接的物联网后端系统,支持多种数据库和协议,简化设备连接管理和任务调度。 其他说明:框架不仅提供了详细的使用说明和技术支持,还在性能优化和资源管理方面做了很多改进,使得开发者可以更加专注于业务逻辑的实现。

    一文了解 MCP、A2A、ANP

    一文了解 MCP、A2A、ANP

    基于Comsol的煤层瓦斯汽固耦合模型研究及其在煤矿安全中的应用

    内容概要:本文详细介绍了如何使用Comsol多物理场仿真软件构建煤层瓦斯汽固耦合模型。文章首先解释了煤层瓦斯的基本概念及其重要性,随后逐步展示了如何在Comsol中定义几何结构、设置材料属性、添加物理场(如达西流和Langmuir吸附)、进行求解及结果分析。特别强调了渗透率动态变化、吸附解吸机制、耦合求解技巧以及模型验证方法。通过这些步骤,可以精确模拟瓦斯在煤层内的运移规律,为煤矿的安全开采提供科学依据。 适合人群:从事煤矿工程、地质勘探、能源开发等领域研究人员和技术人员,尤其是那些希望深入了解煤层瓦斯行为并对现有开采工艺进行优化的人群。 使用场景及目标:适用于需要评估煤层瓦斯风险、优化瓦斯抽采方案、提高煤炭资源利用率的实际工程项目。通过对煤层瓦斯汽固耦合模型的研究,可以帮助企业更好地规划开采活动,确保生产安全的同时最大化经济效益。 其他说明:文中提供的代码片段和建模思路不仅有助于初学者快速入门Comsol仿真工具,也为有经验的用户提供了一些实用的小贴士,如避免常见错误、提升求解效率等。此外,还提到了一些高级特性,如参数扫描界面开发、集群计算等功能的应用。

    基于ssm+mysql的数据结构课堂学生考勤管理系统(含LW+PPT+源码+系统演示视频+安装说明).zip

    系统名称:数据结构课堂考勤管理系统 技术栈:JSP技术、MySQL数据库、SSM框架 系统功能:管理员可以通过系统后台录入学生及教师信息,包括学号、工号以及个人基础资料,同时可以通过课程管理添加课程信息,查看学生请假及签到信息;学生用户可以修改个人资料,结合课程信息实现在线签到提交,提交请假申请;教师用户可以通过管理界面查看学生请假信息并进行在线审批,查看学生签到信息及课程安排。 摘要:高校的不断扩张让在校学生数量不断增加,传统的人工点名签到的考勤管理模式已无法满足需求,同时手动录入的考勤管理模式浪费大量人力物力,也不便于考勤数据信息的管理和查询。考勤管理是高校教务管理工作的重点内容之一,通过考勤管理可以及时了解大学生在校的学习状态,培养学生自律自强的学习品格。结合高校内考勤管理的需求和重要性,利用互联网平台开发设计一款针对校内考勤管理的系统是非常有需求空间的。本文利用JSP技术开发设计了一款在线考勤管理系统,实现了学生与教师之间的信息互通,具备在线签到、在线请假以及课程信息查看等功能。同时结合国内外研究现状以及可行性分析,通过数据库结构的搭建以及系统的测试环节,实现了考勤管理系统的开发设计。

    Java在线教育学习平台LW PPT.pptx

    Java在线教育学习平台LW PPT

    674222850524759拷貝漫畫-2.2.5(1).apk

    674222850524759拷貝漫畫-2.2.5(1).apk

    基于Simulink的NXP MPC5634汽车电子底层驱动封装库解析

    内容概要:本文详细介绍了如何使用Simulink封装NXP MPC5634芯片的底层驱动,将复杂的寄存器配置转化为可视化的模块操作。文章通过具体实例展示了GPIO、PWM、ADC、CAN等常见外设的封装方法及其优势,如简化配置流程、提高开发效率、增强代码可读性和维护性。文中还分享了许多实践经验,如寄存器冲突检测、代码优化技巧以及调试工具的选择。 适合人群:从事汽车电子开发的技术人员,尤其是熟悉NXP MPC5634芯片并希望提高开发效率的研发人员。 使用场景及目标:适用于需要快速开发和调试汽车电子控制系统(如ECU)的团队。主要目标是减少底层驱动开发的时间成本,降低复杂度,提高系统的稳定性和可靠性。 其他说明:文章强调了Simulink封装库的实际应用价值,提供了大量代码片段和调试建议,帮助开发者更好地理解和掌握这一技术。此外,作者还提到了一些常见的陷阱和解决办法,有助于新手少走弯路。

    MATLAB/Simulink中基于分段下垂控制的锂电池SOC均衡策略及其应用

    内容概要:本文详细介绍了在MATLAB/Simulink环境下,针对微电网储能系统的锂电池SOC均衡问题提出的一种创新性的分段下垂控制策略。传统下垂控制存在收敛速度慢和充放电切换时母线电压波动大的问题。为解决这些问题,作者提出了将下垂曲线分为三个区域的方法:当SOC差超过5%时采用指数型下垂系数,2%-5%间使用二次曲线过渡,小于等于2%则保持线性控制。此外,引入了电压补偿机制以抑制母线电压波动,并通过仿真验证了该方法的有效性。结果显示,新的控制策略显著提高了SOC均衡的速度和平滑度,同时有效减少了母线电压波动。 适用人群:从事电力电子、微电网研究的技术人员以及对储能系统优化感兴趣的科研工作者。 使用场景及目标:适用于需要高效管理锂电池组SOC均衡并确保系统稳定的微电网项目。主要目标是在保证系统稳定性的同时提高SOC均衡效率,减少充放电切换时的电压波动。 其他说明:文中提供了详细的MATLAB/Simulink建模步骤和部分源代码片段,有助于读者理解和复现实验结果。

    疫情控制途径.pptx

    疫情控制途径.pptx

    基于ssm+mysql的在线健身网(含LW+PPT+源码+系统演示视频+安装说明).zip

    系统名称:基于SSM健身系统 技术栈:SSM框架、JSP技术、MySQL数据库 系统功能:管理员功能:系统用户信息管理、首页变幻图管理、课程信息管理、健身卡管理、健身器材管理、教练信息管理、购买及报名管理。用户功能:用户注册、健身卡信息查看及在线购买、健身教练信息查看、健身课程信息查看及在线报名、个人后台管理(包括健身卡办理信息管理、健身课程报名信息管理、个人资料维护和管理)。 摘要:随着人们对健康的重视度越来越高,健身经济的不断发展加速推动了健身房的扩张,与此同时多元化和便捷的健身方式也获得越来越多人的青睐,健身房的营销手段也逐渐从现在的宣传彩页推广逐渐转移到了线上平台,人们借助互联网平台实现了健身房健身设施、健身课程、教练信息以及健身卡优惠活动内容的查看和获取,通过线上平台实现了健身卡的办理以及健身课程的预约。相比传统的健身房管理模式,利用系统平台可以为用户提供更加便捷的在线报名及办卡服务,同时也提升健身房办卡及课程预约的管理效率。

    【人工智能应用】DeepSeek实操手册:涵盖AI基础至实战变现的10天学习路径与应用场景实例解析

    内容概要:《10天精通DeepSeek实操手册》旨在帮助零基础用户在10天内掌握DeepSeek的使用方法,通过分阶段的学习目标逐步深入,涵盖AI认知、核心技能应用和实战变现。手册详细介绍了如何利用DeepSeek进行知识检索、内容生成、数据分析、创意设计等任务,并提供了具体的实操任务和案例,如生成论文大纲、优化会议纪要、处理合同审查等。此外,手册还提供了40个优质提示词库,覆盖学习提升、职场效率、生活助手等多个场景,以及学术资源导航和变现路径案例,帮助用户更好地应用DeepSeek解决实际问题。 适合人群:适合希望快速上手DeepSeek的零基础用户,尤其是希望通过AI工具提升工作效率、内容创作能力或寻求创收途径的人士。 使用场景及目标:①帮助用户破除对AI的恐惧,建立科学认知,了解AI的应用边界;②通过具体场景和任务,如论文写作、会议纪要整理、合同审查等,提高用户的实际操作能力;③提供变现指南,帮助用户通过AI工具开辟副业或优化现有业务,如代写商业计划书、制作AI使用指南、优化电商详情页等。 阅读建议:由于手册内容丰富且实用,建议读者结合自身需求,逐步实践每个阶段的任务,并灵活运用提供的提示词库和案例,确保在学习过程中不断积累经验和技能。同时,注意遵守相关法律法规,避免不当使用工具。

    Delphi 12.3控件之ZhuTcp6.0.zip

    Delphi 12.3控件之ZhuTcp6.0.zip

    java+算法+桶排序

    java+算法+桶排序

Global site tag (gtag.js) - Google Analytics