<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" /> ${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" /> ${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}" /> ${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}" /> ${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;
}
相关推荐
通过以上介绍,你应该对如何使用JavaScript控制checkbox有了全面的理解。无论是单个操作还是批量处理,亦或是实现特定的交互逻辑,JavaScript都能满足你的需求。在实际项目中,结合CSS和HTML,你可以创建出丰富多样...
### JS控制Checkbox全选、取消全选与删除功能 在前端开发中,处理表单数据时经常需要用到对多个复选框(checkbox)的操作,比如全选、取消全选以及基于选择状态进行某些操作(如删除)。本文将详细介绍如何通过...
CheckBox复选框JS实现全选、不选、全不选功能,很简单,具体内容如下 思路: 1、获取元素 2、给全选 不选 反选添加点击事件 3、用for循环checkbox 4、把checkbox的checked设置为true即实现全选 5、把checkbox的...
在ie\ff下测试过,都可以使用.实现单选,也可以取消选择
在JavaScript(JS)中,操作HTML元素,包括修改checkbox(复选框)的选中状态,是前端开发中常见的任务。复选框是用户界面中一种允许用户进行多项选择的控件,其状态通常有两种:选中(checked)和未选中。在本文中...
`JS`(JavaScript)作为网页动态交互的主要语言,是实现`TreeView`中`Checkbox`功能的关键。本篇文章将深入探讨如何使用`JS`来实现`TreeView`中`Checkbox`的控制,包括点击父节点时全选子节点,以及点击子节点时保持...
js 实现 使用checkbox控制文本框! 值得下载看看!资源免费,大家分享!!
在JavaScript(JS)中,`checkBox`,也称为复选框,是网页表单中常见的一种元素,用于用户选择一个或多个选项。全选功能在处理多选项时非常实用,比如在一个列表中批量选择所有项目。这个标题和描述虽然重复,但明显...
### radiobutton 控制 checkbox 多选 (js 实现) 在 Web 开发中,表单是与用户交互的重要组成部分。为了实现更加灵活的功能,有时我们需要利用 JavaScript 来控制表单元素的状态,例如通过单选按钮(`...
4. **API操作**:jstree提供了一套完整的API接口,用于程序化地控制树的状态。比如,`get_checked`可以获取所有被选中的节点,`check_node`和`uncheck_node`则可以用来手动改变节点的选中状态。 5. **数据源**:js...
在网页开发中,有时我们需要对用户的选择行为进行控制,例如限制用户在一组复选框(checkbox)中只能选择一定数量的选项。本文将深入解析如何使用JavaScript实现这一功能,以及如何通过PHP获取用户在HTML表单中选择...
当遇到 `checkbox` 不易被样式控制的情况时,我们可以采用JavaScript(JS)来模拟实现更丰富的视觉效果。以下将详细介绍如何使用JS和CSS来实现自定义的 `checkbox` 样式。 首先,我们需要理解原生 `checkbox` 的...
而`checkbox.js`文件就是专门针对这种元素进行操作的一个JavaScript库,它提供了全选、全不选以及统计选中个数等功能,极大地提升了用户体验和开发效率。 一、Checkbox.js的核心功能 1. **全选与全不选**:`...
这里可能使用了伪类(如`:checked`)来控制Checkbox不同状态下的样式。 3. **images**:这个文件夹可能存储了用于Checkbox美化的一些图片资源。例如,可以为未选中和选中的状态提供不同的背景图像,或者用于自定义...
综上所述,实现 `checkbox` 的多项选中及取消选中,需要理解 `checkbox` 的基本用法,掌握JavaScript操作DOM属性的方法,理解 `attr` 与 `prop` 的区别,并灵活运用事件监听和样式控制。通过这些技术,你可以创建出...
当 Checkbox 的状态发生变化时,JavaScript 函数 `ColumnState` 将被调用,以控制 TABLE 的显示和隐藏。 知识点 6:使用 HTML 元素的属性来控制 TABLE 的显示和隐藏 在上面的代码中,我们使用了 HTML 元素的 `...
在JavaScript编程中,`CheckBoxGroup.js` 是一个用于管理复选框组的类,它提供了一种方便的方式来处理多个复选框之间的交互和数据管理。这个类通常用于创建用户界面,其中用户可以从多个选项中选择一个或多个。下面...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery来操作...希望这个教程能帮助你更好地理解和运用jQuery来控制checkbox。
"js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求,即通过JavaScript控制HTML中的复选框(checkboxes),实现全选、反选和取消全部选中的功能。在本文中,我们将深入探讨如何...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 例二: 要实现的功能如图所示: 全选的checkbox的js代码如下: var status=true; function allselect(){ var tags=document.getElementsByTagName(“input”); for ...