`
dalongxn
  • 浏览: 31919 次
  • 性别: 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；如：全选框ＩＤ为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>

 

 

分享到：
| 通过Runtime调用dos命令实现java动态编译
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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`事件中，计算累计总数并显示在特定列...

    永磁同步电机无传感器控制中反电势积分法的技术解析与应用

    内容概要：本文详细探讨了永磁同步电机(PMSM)无传感器控制中的关键技术——反电势积分法。首先介绍了反电势积分法的基本概念及其在磁场定向控制中的重要作用，随后通过具体的定子电压方程和磁链方程，展示了如何利用这些方程推导出转子的位置信息。接着，文章提供了多个代码示例，包括数值积分、磁链观测以及转子位置和转速的计算方法。此外，文中还讨论了一些实际应用中的挑战，如积分漂移、低速性能不佳等问题，并提出了相应的解决方案，如抗饱和积分、高通滤波等。最后，分享了几条宝贵的实战经验和技巧，强调了参数辨识和初始位置判断的重要性。 适合人群：从事电机控制系统设计的研究人员和技术工程师，尤其是那些希望深入了解无传感器控制技术和优化现有系统的专业人士。 使用场景及目标：适用于需要减少硬件成本并提高系统效率的工业应用场景，如风机、水泵等设备的控制。目标是在不增加额外传感器的情况下，实现对永磁同步电机的有效控制。 其他说明：尽管反电势积分法在理论上能够很好地估计转子位置，但在实际应用中仍存在诸多挑战，因此建议初学者先在一个安全可控的环境中进行实验，逐步掌握这一技术后再应用于更复杂的工程项目中。

    【智能制造领域】MES系统在智能工厂中的关键作用与集成挑战：实现生产全流程透明化与效率提升

    内容概要：MES（制造执行系统）作为智能工厂的关键组成部分，连接ERP/PDM管理和工业生产控制，形成闭环管理，提升生产效率和灵活性。文章通过比亚迪和赛轮金宇的案例，展示了MES在实现生产透明化、实时监控、数据采集与分析等方面的重要作用。MES不仅优化了生产流程，还通过与ERP、EWM等系统的集成，实现了订单全生命周期管理和供应链优化。此外，MES在工业4.0背景下，需应对系统和技术集成的双重挑战，确保与企业现有IT/OT环境和业务流程的无缝对接，并支持企业的发展与创新。; 适合人群：对智能制造、工业4.0感兴趣的制造业从业者、企业管理者以及相关领域的研究人员。; 使用场景及目标：①了解MES在智能工厂中的核心作用及其对企业生产效率和灵活性的提升；②学习MES与其他系统（如ERP、EWM）的集成方法，实现生产全流程的透明化和数据化管理；③探索MES在应对工业4.0挑战中的解决方案，包括系统和技术集成的策略。; 其他说明：MES不仅是生产管理工具，更是智能工厂的“神经系统”，通过数据采集和分析，支持企业决策和持续改进。企业在实施MES时，需关注系统部署的灵活性和适应性，以确保其长期有效的支持业务发展。

    深度学习融合MetaFormer的UNet网络架构设计：图像分割任务中的性能提升方案

    内容概要：本文介绍了一种结合MetaFormer模块的U-Net神经网络架构，用于图像分割任务。模型由编码器（下采样）和解码器（上采样）组成，中间加入了MetaFormer模块增强特征提取能力。编码部分包括多个Down层，每个Down层由最大池化和DoubleConv构成；解码部分包括多个Up层，用于逐步恢复图像分辨率并融合来自编码器的特征。MetaFormer模块通过平均池化和1x1卷积操作来增强局部特征表达。最后通过OutConv层输出分类结果。文中还展示了如何创建该模型以及输入张量的尺寸变化情况。 适合人群：有一定深度学习基础，特别是熟悉PyTorch框架和图像处理技术的研究人员或工程师。 使用场景及目标：①适用于医学影像、遥感图像等领域的图像分割任务；②研究MetaFormer模块对U-Net性能的影响；③探索不同上采样方法（双线性插值与反卷积）的效果差异。 阅读建议：建议读者先了解U-Net的基本原理和结构，再深入研究本文提出的改进点，尤其是MetaFormer模块的作用机制。同时可以通过实验调整参数，观察不同配置下的模型表现。

    【Android开发】7个代表性应用源码解析与学习指南：从基础功能到高级技术实战参考7个具有代表

    内容概要：本文为Android开发者提供了7个代表性应用的源码解析与学习指南，涵盖从基础功能到高级技术实现。每个应用都详细介绍了功能概述、核心技术点及其学习价值。包括待办事项应用（To-Do List App），涉及Room数据库、RecyclerView与MVVM架构；天气应用（Weather App），涵盖Retrofit与网络请求、多线程处理；地图应用（Google Maps App），讲解Google Maps API、位置权限管理；实时聊天应用（Chatting App），探讨Firebase实时数据库、身份验证与消息通知；新闻阅读应用（News App），介绍分页加载、WebView集成与缓存策略；测验应用（Quiz App），涉及SQLite数据库、自定义视图与动画效果；播客应用（Podcast App），涵盖ExoPlayer集成、后台服务与数据绑定。; 适合人群：有一定Android开发基础，希望深入理解核心技术并提高实战能力的开发者。; 使用场景及目标：①通过实际项目源码学习Android开发中的关键技术和最佳实践；②掌握从基础功能到高级特性的实现方法，如数据存储、网络请求、UI交互等；③通过分模块学习和实践优化，提升开发技能和解决问题的能力。; 其他说明：建议合法获取源码，优先选择开源平台；分模块进行调试，逐步理解整体架构；在源码基础上添加新功能，如黑暗模式、多语言支持，以提升实战能力；同时关注Android生态的变化，如谷歌对AOSP项目的调整以及鸿蒙等替代生态的发展。

    python实现将labelme数据标注格式转换为Yolo语义分割数据集（自动划分训练集合验证集）.zip

    python实现将labelme数据标注格式转换为Yolo语义分割数据集（自动划分训练集合验证集）.zip 将labelme数据标注格式转换为Yolo语义分割数据集，并可自动划分训练集和验证集 使用 直接运行releace内的exe文件或源码内的python文件即可。脚本根据文件名对图片-标注进行匹配。 python main.py 示例： python main.py

    汇川H5U PLC程序框架详解：气缸与轴控制的高效实现及移植性探讨

    内容概要：本文详细介绍了汇川H5U PLC的一个完整程序框架，涵盖气缸控制和轴控制两大主要部分。气缸控制部分包括伸出、缩回和报警功能，通过不同信号判断控制气缸动作及其报警处理。轴控制部分涉及通讯、READY、使能、JOG、绝对定位、压合、报警等多种功能，采用状态机设计，确保各功能模块间的顺畅衔接。此外，文章还讨论了该框架的高移植性和兼容性，适用于多种品牌PLC，并提供了丰富的调试技巧和优化方法。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程有一定基础的人群。 使用场景及目标：①帮助工程师理解和掌握汇川H5U PLC的程序框架，提升编程效率；②提供详细的气缸和轴控制逻辑，便于快速搭建和调试自动化控制系统；③展示框架的高移植性，支持多品牌PLC的快速适配。 其他说明：文中提供的代码示例和调试技巧有助于解决实际项目中的常见问题，提高系统的稳定性和可靠性。

    西门子S7-1200 PLC在新能源电池涂布机浆料输送系统的应用与优化

    内容概要：本文详细介绍了基于西门子S7-1200 PLC的新能源电池涂布机浆料输送系统的设计与实现。主要内容涵盖物料分配逻辑、模拟量处理、WINCC画面设计、配方管理和变频器控制等方面的技术细节。文中不仅展示了具体的编程代码片段，如料罐选择逻辑、压力值转换、动态颜色变化等，还分享了许多实际调试过程中遇到的问题及其解决方案。此外，文章强调了系统集成时硬件与软件之间的紧密配合，以及如何通过优化提高系统的稳定性和精确度。 适合人群：从事工业自动化领域的工程师和技术人员，特别是熟悉PLC编程和新能源行业的从业者。 使用场景及目标：适用于需要构建高效、稳定的浆料输送控制系统的企业或研究机构。主要目标是帮助读者掌握S7-1200 PLC的应用技巧，提升对复杂工业控制系统的理解和实践能力。 其他说明：文章提供了丰富的实战经验和具体案例，对于希望深入了解PLC编程及工业自动化的人来说是非常有价值的参考资料。同时，文中提到的一些创新方法和技术手段也为相关领域的进一步探索提供了思路。

    Bolt.new\ChatGPT+公司网页制作（含代码）

    Bolt.new\ChatGPT+公司网页制作（含代码）

    【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 科研合作

    西门子Smart200 PLC中基于指针的整数与浮点数数据处理算法实现

    内容概要：本文详细介绍了针对西门子Smart200 PLC平台进行数据处理的方法，重点在于利用指针操作实现整数和浮点数类型的平均值、中值、最大值、最小值计算以及数据移位等功能。文中不仅提供了具体的代码实例，如使用指针完成数据排序、移位等操作，还讨论了浮点数处理中的精度问题及其解决方案。此外，作者强调了指针操作的安全性和效率，并给出了相应的边界检查方法。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是熟悉或正在学习PLC编程的人群。 使用场景及目标：适用于需要对传感器数据或其他实时采集的数据进行快速而精确处理的应用场合，如质量监控、趋势分析等。目的是提高数据处理的速度和准确性，同时减少内存占用并增强系统的稳定性。 其他说明：文中提供的代码模板可以直接应用于实际工程项目中，帮助开发者节省开发时间和成本。同时提醒使用者注意指针操作可能带来的风险，确保程序运行的安全可靠。

    电力电子领域380V-800V模块化多电平变换器(MMC)仿真搭建与控制策略解析

    内容概要：本文详细介绍了380V交流转800V直流的模块化多电平变换器（MMC）仿真搭建过程及其控制策略。首先阐述了MMC的基本结构，每个桥臂由多个子模块串联组成，并给出了关键参数如电容值和IGBT开关频率。接着深入探讨了分层控制架构，包括有功无功控制、电容电压均衡和PWM调制，并提供了具体的环流抑制方法。文中还展示了仿真的启动过程和平滑过渡特性，以及针对常见问题的解决方案和技术细节。最后，作者分享了一些实用的经验和技巧，如参数调校、避免仿真陷阱等，并推荐了几篇重要的参考文献。 适合人群：从事电力电子领域的研究人员、工程师及高校相关专业学生。 使用场景及目标：适用于需要理解和实现高效、稳定的高压直流输电系统的场合。目标是帮助读者掌握MMC的工作原理、仿真搭建步骤和优化控制策略，从而提高系统的动态响应速度和稳定性。 其他说明：随文提供的仿真模型和测试案例有助于加深理解并进行实际操作练习。

    Line20250422.7z

    获取不到数据值

    手绘小房子素材儿童美术教学教案课件模板.pptx

    手绘小房子素材儿童美术教学教案课件模板

    冬天小雪人素材儿童教学课件教案模板.pptx

    冬天小雪人素材儿童教学课件教案模板

    儿童手牵手画板素材美术教学课件模板.pptx

    儿童手牵手画板素材美术教学课件模板

    三菱FX3U-485ADP-MB模块实现多品牌变频器Modbus RTU通讯控制

    内容概要：本文详细介绍了如何使用三菱FX3U-485ADP-MB模块实现对施耐德ATV312、三菱E700和台达VFD-M三种变频器的Modbus RTU通讯控制。首先，文章阐述了硬件配置，包括PLC本体、485ADP-MB模块以及连接方式。接着，针对每种变频器的具体参数设置进行了详细的说明，如波特率、数据位、校验位等。然后，展示了PLC程序的核心段落，特别是RS指令的应用及其注意事项。此外，还涉及了触摸屏的配置方法，确保用户可以通过触摸屏进行频率设定和状态监控。最后，提供了实测过程中遇到的问题及解决方案，帮助读者避开常见陷阱。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些需要进行多品牌变频器集成工作的专业人士。 使用场景及目标：适用于需要将不同品牌的变频器接入同一控制系统的企业或项目，旨在提高系统的兼容性和稳定性。通过本文的学习，读者能够掌握具体的硬件配置、参数设置、编程技巧以及调试方法。 其他说明：文中提供的完整程序和参数表可以在评论区获取，便于读者快速上手实践。同时，建议读者在实际应用中结合自身情况进行适当调整。

    欧姆龙CP1H与台达VFD-M变频器Modbus RTU通讯方案及应用实例

    内容概要：本文详细介绍了欧姆龙CP1H PLC与台达VFD-M变频器通过Modbus RTU协议进行通讯的具体实现方法。主要内容涵盖硬件接线注意事项、PLC程序核心代码、寄存器地址解析以及触摸屏联动要点。文中还提供了多个实际应用场景中的避坑指南和技术细节，确保系统的稳定性和可靠性。此外，作者分享了许多调试经验和常见问题解决方案，帮助读者快速上手并成功搭建通讯系统。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些需要将PLC与变频器进行通讯集成的从业者。 使用场景及目标：适用于需要实现PLC对变频器进行远程控制和监测的应用场合，如工厂生产线自动化控制系统。主要目标是提高生产效率，减少人工干预，增强系统的智能化水平。 其他说明：文章不仅提供了详细的代码示例，还包括了丰富的实践经验分享，有助于读者更好地理解和掌握相关技术。同时，强调了良好的工程习惯，如合理的布线方式、正确的参数配置等对于系统稳定性的重要性。

Magicbox
Global site tag (gtag.js) - Google Analytics