`
wm_java
  • 浏览: 4663 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js控制checkbox

 
阅读更多
<c:forEach items="${resMap}" var="resMap">
					<c:choose>
						<c:when   test="${fn:contains(resMap.key,'flg')}">
							<tr>
								<td height="22" align="left" bgcolor="#c4e0e6"
  style="font-weight: bold;"><input type="checkbox" id="parentBox" name="parentBox" checked="checked" value="${fn:replace(resMap.key,'flg','')}" onclick="checkParent(this)" /> <img src="${ctx}/images/icon_01.gif" style="padding-left: 3px; padding-right: 4px;" width="16" height="16" />&nbsp;${fn:replace(resMap.key,'flg','')}</td> </tr> </c:when> <c:otherwise> <tr> <td height="22" align="left" bgcolor="#c4e0e6" style="font-weight: bold;"><input type="checkbox" id="parentBox" name="parentBox" value="${resMap.key}" onclick="checkParent(this)" /> <img src="${ctx}/images/icon_01.gif" style="padding-left: 3px; padding-right: 4px;" width="16" height="16" />&nbsp;${resMap.key}</td> </tr> </c:otherwise> </c:choose> <tr> <td height="22" style="border: 1px solid; border-color: #F5FFFA; line-height: 22px;"> <c:forEach items="${resMap.value}" var="res"> <div style="float: left; width: 25%"> <c:if test="${res.deleteFlg eq 1}"> <input type="checkbox" id="resourceId" name="${res.resourceId }" checked="checked" onclick="checkChildren(this)" value="${resMap.key}" />&nbsp;${res.resourceName } </c:if> <c:if test="${res.deleteFlg ne 1}"> <input type="checkbox" id="resourceId" onclick="checkChildren(this)" name="${res.resourceId }" value="${resMap.key}" /> &nbsp;${res.resourceName} </c:if> </div> </c:forEach></td> </tr> </c:forEach>
 与后台数据关联,后台数据值传入是否为勾选 
function checkParent(obj) {
		var systemId = obj.value;
		var objName = document.getElementById("setAuthForm");
		var parent = document.getElementsByName("parentBox");
		var tempState;
		for ( var j = 0; j < parent.length; j++) {
			var parentSystemId = parent[j].value;
			if (parentSystemId == systemId) {
				tempState = parent[j].checked;
			}
		}

		for ( var i = 2; i < objName.length; i++) {
			if (objName[i].value.indexOf(systemId)==0 && objName[i].checked != tempState) {
				objName[i].checked = tempState;
			}
		}
	}
	function checkChildren(obj) {
		var systemId = obj.value;
		var objName = document.getElementById("setAuthForm")
		var parent = document.getElementsByName("parentBox");
		
		for (i = 2; i < objName.length; i++) {
			var systemIdRight=systemId.indexOf(objName[i].value);
			if (systemIdRight==0 && !objName[i].checked
					&& objName[i].name != "parentBox") {
				for ( var j = 0; j < parent.length; j++) {
					var parentSystemId = parent[j].value;
					if (systemId.indexOf(parentSystemId)==0) {
						parent[j].checked = false;
						return;
					}
				}

			}
		}
		for ( var j = 0; j < parent.length; j++) {
			var parentSystemId = parent[j].value;
			if (systemId.indexOf(parentSystemId)==0 ) {
				parent[j].checked = true;
			}
		}
	}
 

 


初始页面不与后台数据关联://checkbox选择

function checkParent(){

   var children = document.getElementsByName("childrenBox");

var parent = document.getElementById("parentBox");

var tempState=parent.checked;

for(i=0;i<children.length;i++) {

 if(children[i].checked!=tempState)

 children[i].click();

}

}

function checkChildren() {

var children = document.getElementsByName("childrenBox");

var parent = document.getElementById("parentBox");

for(var i=0; i<children.length; i++) {

    if(!children[i].checked) {

    parent.checked = false;

    return;

    }

}

parent.checked = true;

}

  • 大小: 13 KB
分享到:
评论

相关推荐

    JS控制checkboxJS控制checkboxJS控制checkbox

    通过以上介绍,你应该对如何使用JavaScript控制checkbox有了全面的理解。无论是单个操作还是批量处理,亦或是实现特定的交互逻辑,JavaScript都能满足你的需求。在实际项目中,结合CSS和HTML,你可以创建出丰富多样...

    今天把JS控制checkbox全选、取消全选、删除功能的代码贴出来。。。。。

    ### JS控制Checkbox全选、取消全选与删除功能 在前端开发中,处理表单数据时经常需要用到对多个复选框(checkbox)的操作,比如全选、取消全选以及基于选择状态进行某些操作(如删除)。本文将详细介绍如何通过...

    JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox复选框JS实现全选、不选、全不选功能,很简单,具体内容如下 思路: 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...

    js实现checkbox单选

    在ie\ff下测试过,都可以使用.实现单选,也可以取消选择

    用JS修改checkbox的选中状态

    在JavaScript(JS)中,操作HTML元素,包括修改checkbox(复选框)的选中状态,是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件,其状态通常有两种:选中(checked)和未选中。在本文中...

    JS实现TreeView中Checkbox的控制

    `JS`(JavaScript)作为网页动态交互的主要语言,是实现`TreeView`中`Checkbox`功能的关键。本篇文章将深入探讨如何使用`JS`来实现`TreeView`中`Checkbox`的控制,包括点击父节点时全选子节点,以及点击子节点时保持...

    js 实现 使用checkbox控制文本框

    js 实现 使用checkbox控制文本框! 值得下载看看!资源免费,大家分享!!

    checkBox全选——jscheckBox全选——jscheckBox全选——js

    在JavaScript(JS)中,`checkBox`,也称为复选框,是网页表单中常见的一种元素,用于用户选择一个或多个选项。全选功能在处理多选项时非常实用,比如在一个列表中批量选择所有项目。这个标题和描述虽然重复,但明显...

    radiobutton 控制checkbox多选(js实现)

    ### radiobutton 控制 checkbox 多选 (js 实现) 在 Web 开发中,表单是与用户交互的重要组成部分。为了实现更加灵活的功能,有时我们需要利用 JavaScript 来控制表单元素的状态,例如通过单选按钮(`...

    js tree,checkbox tree

    4. **API操作**:jstree提供了一套完整的API接口,用于程序化地控制树的状态。比如,`get_checked`可以获取所有被选中的节点,`check_node`和`uncheck_node`则可以用来手动改变节点的选中状态。 5. **数据源**:js...

    js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析

    在网页开发中,有时我们需要对用户的选择行为进行控制,例如限制用户在一组复选框(checkbox)中只能选择一定数量的选项。本文将深入解析如何使用JavaScript实现这一功能,以及如何通过PHP获取用户在HTML表单中选择...

    样式控制checkbox

    当遇到 `checkbox` 不易被样式控制的情况时,我们可以采用JavaScript(JS)来模拟实现更丰富的视觉效果。以下将详细介绍如何使用JS和CSS来实现自定义的 `checkbox` 样式。 首先,我们需要理解原生 `checkbox` 的...

    checkbox.js

    而`checkbox.js`文件就是专门针对这种元素进行操作的一个JavaScript库,它提供了全选、全不选以及统计选中个数等功能,极大地提升了用户体验和开发效率。 一、Checkbox.js的核心功能 1. **全选与全不选**:`...

    CheckBox的优化.rar

    这里可能使用了伪类(如`:checked`)来控制Checkbox不同状态下的样式。 3. **images**:这个文件夹可能存储了用于Checkbox美化的一些图片资源。例如,可以为未选中和选中的状态提供不同的背景图像,或者用于自定义...

    checkbox多项选中及取消选中

    综上所述,实现 `checkbox` 的多项选中及取消选中,需要理解 `checkbox` 的基本用法,掌握JavaScript操作DOM属性的方法,理解 `attr` 与 `prop` 的区别,并灵活运用事件监听和样式控制。通过这些技术,你可以创建出...

    js控制隐藏显示table特定列

    当 Checkbox 的状态发生变化时,JavaScript 函数 `ColumnState` 将被调用,以控制 TABLE 的显示和隐藏。 知识点 6:使用 HTML 元素的属性来控制 TABLE 的显示和隐藏 在上面的代码中,我们使用了 HTML 元素的 `...

    CheckBoxGroup.js:CheckBoxGroup JavaScript 类

    在JavaScript编程中,`CheckBoxGroup.js` 是一个用于管理复选框组的类,它提供了一种方便的方式来处理多个复选框之间的交互和数据管理。这个类通常用于创建用户界面,其中用户可以从多个选项中选择一个或多个。下面...

    jQuery操作checkbox并获取选中值

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery来操作...希望这个教程能帮助你更好地理解和运用jQuery来控制checkbox。

    js checkbox全选 反选 取消全部设置表单html复选框

    "js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求,即通过JavaScript控制HTML中的复选框(checkboxes),实现全选、反选和取消全部选中的功能。在本文中,我们将深入探讨如何...

    JS checkbox控制操作代码

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 例二: 要实现的功能如图所示: 全选的checkbox的js代码如下: var status=true; function allselect(){ var tags=document.getElementsByTagName(“input”); for ...

Global site tag (gtag.js) - Google Analytics