`
dalongxn
  • 浏览: 31867 次
  • 性别: 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）的全选、反选功能，并获取选中的复选框的值。这些功能在用户界面中常见于批量...

    Axure RP 复选框全选、反选

    用Axure RP 8.0做的原型设计列子，作用是复选框做全选和非全选，已选的做反选。可以学习下反选或非反选的交互思路。

    JS实现复选框全选反选

    全选功能允许用户一次性选中所有复选框，而反选则是将所有选中的复选框取消选中，或者将未选中的复选框进行选中。 要实现复选框的全选与反选，首先需要在HTML中定义复选框和一个用于触发操作的按钮。例如，可以通过...

    axure复选框全选反选效果.rp

    axure复选框全选反选效果.rp

    基于jQuery的三个JS复选框全选反选例子.zip

    本示例“基于jQuery的三个JS复选框全选反选例子.zip”聚焦于如何利用jQuery实现复选框的全选与反选功能，这在表格或者多选项选择场景中非常常见。以下将详细介绍这一功能的实现方式。 首先，我们需要理解复选框...

    JQ 复选框全选反选

    "JQ 复选框全选反选"是jQuery应用中的一个常见功能，主要用于增强用户界面的交互性。在网页中，复选框常常用于让用户多选选项，而全选和反选功能则提供了方便快捷的选择所有或取消所有选项的方式。 首先，我们需要...

    实现table表格checkbox复选框的全选 反选

    在上面的代码中，我们有一个全选复选框（`#selectAll`）和多个行内复选框（`.itemCheckbox`）。全选复选框用于控制所有行内复选框的状态。 接下来，我们使用JavaScript（通常配合jQuery库，但也可以使用原生JS）来...

    多选框全选反选

    1. **目标**：通过JavaScript代码实现对一组复选框进行全选和全不选的操作。 2. **功能需求**： - 全选所有复选框。 - 反选（全不选）所有复选框。 3. **技术选型**：使用纯JavaScript实现。 #### 二、代码分析 ...

    spreadjs_列头添加复选框全选功能-demo.zip

    《SpreadJS：实现列头复选框全选功能详解》 SpreadJS 是一款强大的JavaScript电子表格库，由 GrapeCity 公司开发，它允许开发者在Web应用中创建、编辑和展示电子表格数据。在实际应用中，我们经常需要在列头添加复...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中，经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能，并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中，购物车模块是用户进行商品选购时的重要组成部分。其中，复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

    复选框全选、全不选和反选的效果实现.rar

    本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...

    C#复选框实现全选反选和全不选

    在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...

    微信小程序获取复选框全选反选选中的值(实例代码)

    在微信小程序开发中，获取复选框全选与反选的选中值是一个常见需求。本文将详细讲解如何通过实例代码实现这一功能，并会详细说明相关知识点。 首先，我们需要了解微信小程序中几个关键组件的使用方法，包括`...

    带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选

    在IT领域，尤其是在前端开发中，构建用户界面时经常需要处理多级目录树结构，并且在这样的结构中加入复选框功能，以便用户可以进行批量选择或者全选、反选操作。这种技术常用于文件管理器、权限设置、菜单配置等场景...

    js控制复选框全选、全不选

    在JavaScript编程中，"js控制复选框全选、全不选"是一个常见的需求，尤其在数据表或者选项列表中，用户可能希望一次性选中或取消所有复选框。这个功能可以通过编写简单的JavaScript代码实现。这里我们将深入探讨如何...

    jquery 、js实现复选框 (全选、反选)

    ### 使用jQuery和JavaScript实现复选框的全选与反选功能 在Web开发中，复选框（checkbox）是常用的一种交互元素，特别是在表格或列表中用于选择多个项目时非常实用。本文将详细介绍如何利用jQuery和原生JavaScript...

    javaScript实现复选框全选反选事件详解

    本文将详细介绍如何使用JavaScript实现复选框的全选和反选事件。复选框全选和反选是网页交互设计中常见的功能，常用于列表操作、表单提交等场景，允许用户一次性选择或取消选择多个选项。文中将通过实例代码展示如何...

    javascript复选框全选

    javascript 复选框全选，复选框全选，复选框全选

    复选框全选和反选.zip

    在"复选框全选和反选"这个压缩包中，可能包含了HTML文件（定义了复选框和页面结构）、JavaScript文件（实现了全选和反选的功能逻辑）、CSS文件（提供了自定义的样式）。解压文件后，你可以查看源代码，学习和理解这...

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