最近做项目时，需要用到CheckBox的级联选择，于是自己动手写了一个。
这个CheckBox的级联选择是用纯JavaScript编写的，没有借助其他的JS框架。
希望能够对大家有用，同时希望大家多多指出代码中的不足！
（注：新上传了跨浏览器的版本。特别感谢“02221021”兄的帮助！）
以下是JS代码（附件中可以看效果）：
//判断所有的checkbox的选中状态
//@id : checkbox的id
function checkedStatus(id){
//获取checkbox
var temp = document.getElementById(id);
//设置checkbox的下级checkbox的状态
setChildCheckBox(temp);
//设置checkbox的上级checkbox的状态
setParentCheckBox(temp);
}
//获取checkbox的下级checkbox信息
//@entity : checkbox的DOM对象
function findChildCheckBox(entity){
//存放下级checkbox的数组
var chkArray = new Array();
//判断是否有input标签
if(document.getElementsByTagName("input")){
//获取所有的input标签
var inputs = document.getElementsByTagName("input");
//遍历input标签，获取下级checkbox
for(var i = 0; i < inputs.length; i++){
var ele = inputs[i];
//判断type是“checkbox”，并且checkbox的parentId等于entity的id
if(ele.type == "checkbox" && ele.parentId == entity.id){
chkArray.push(ele);
}
}
}
return chkArray;
}
//获取checkbox的同级checkbox信息
//@entity : checkbox的DOM对象
function findBrotherCheckBox(entity){
//存放同级checkbox的数组
var chkArray = new Array();
//判断是否有input标签
if(document.getElementsByTagName("input")){
//获取所有的input标签
var inputs = document.getElementsByTagName("input");
//遍历input标签，获取同级checkbox
for(var i = 0; i < inputs.length; i++){
var ele = inputs[i];
//判断type是“checkbox”，并且checkbox的parentId等于entity的parentId
if(ele.type == "checkbox" && ele.parentId == entity.parentId){
chkArray.push(ele);
}
}
}
return chkArray;
}
//获取checkbox的上级checkbox信息
//@entity : checkbox的DOM对象
function findParentCheckBox(entity){
//存放上级checkbox的对象
var _element = null;
//判断是否有input标签
if(document.getElementsByTagName("input")){
//获取所有的input标签
var inputs = document.getElementsByTagName("input");
//遍历input标签，获取上级checkbox
for(var i = 0; i < inputs.length; i++){
var ele = inputs[i];
//判断type是“checkbox”，并且checkbox的id等于entity的parentId
if(ele.type == "checkbox" && ele.id == entity.parentId){
_element = ele;
break;
}
}
}
return _element;
}
//设置checkbox的下级checkbox的状态
//@entity : checkbox的DOM对象
function setChildCheckBox(entity){
//entity的选中状态
var status = entity.checked;
//获取entity的下级checkbox
var childList = findChildCheckBox(entity);
//判断是否有下级
if(childList.length > 0){
//遍历下级checkbox，并设置状态
for(var i = 0; i < childList.length; i++){
childList[i].checked = status;
//设置childList[i]的下级checkbox的状态
setChildCheckBox(childList[i]);
}
}
}
//设置checkbox的上级checkbox的状态
//@entity : checkbox的DOM对象
function setParentCheckBox(entity){
//entity的上级checkbox的选中状态
var parentChecked = true;
//获取entity的上级checkbox
var parentCheckBox = findParentCheckBox(entity);
//判断是否有上级
if(parentCheckBox){
//获取entity的同级checkbox
var brotherList = findBrotherCheckBox(entity);
//判断是否有同级
if(brotherList.length > 0){
//遍历同级checkbox
for(var i = 0; i < brotherList.length; i++){
//如果同级的checkbox有未选中的状态，则设置上级的checkbox的状态为false
if(brotherList[i].checked == false){
parentChecked = false;
break;
}
}
}
//设置上级checkbox的选中状态
parentCheckBox.checked = parentChecked;
//设置parentCheckbox的上级checkbox的状态
setParentCheckBox(parentCheckBox);
}
}
效果如下：
- 大小: 6.6 KB
分享到：
相关推荐
实现树形菜单的CheckBox级联选择功能是增强用户交互性的重要手段，它允许用户通过选择一个节点来自动选中或取消选中其所有子节点，以及可能的父节点。这个特性通常在多级选择场景中非常有用。 首先，我们要理解`...
使用javascript实现checkbox级联选择
本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <title>&...
"Flex Tree + Checkbox级联勾选"是一个重要的功能点，通常出现在数据管理、配置界面或文件管理系统中，允许用户进行批量选择或级联操作。 首先，我们来详细了解一下Flex Tree。Flex Tree是基于Adobe Flex技术的一种...
带CheckBox和级联操作的Tree 带CheckBox和级联操作的Tree 带CheckBox和级联操作的Tree
在前端开发中，CheckBox Tree（复选框树）是一种常见的组件，用于展示具有层级关系的数据，并支持用户进行多级选择。这个"纯JS+HTML写的checkBox Tree 级联选中"实例，解决了其他示例中可能存在的BUG，提供了一个...
ExtJS4.2 Tree 级联选择是一个用于构建用户界面的功能，特别是在处理层次结构数据时非常有用。在ExtJS库中，Tree组件允许我们展示和操作数据以树形结构显示，而级联选择功能则意味着当用户选择一个节点时，它的所有...
"checkbox 用shift键 级联选择"这个话题涉及到一种提高用户效率的交互设计，它允许用户通过按下Shift键快速选择一系列连续的复选框（checkboxes）。在网页或应用程序中，复选框通常用于让用户在多个选项中进行多选。...
在实际应用中，我们经常需要处理树形结构的复选框，实现级联选择功能，即当父节点被选中时，其所有子节点自动被选中，反之亦然。这篇博客“Ext TreePanelrcheckbox级联选择的实现”就专注于探讨这个主题。 首先，...
这个例子可实现二级联动 比如:口1.xxxx 口xxx 口xxx 口xxx 选中1.xxxx时,会自动将其对应的3个子项选中.
在IT行业中，尤其是在前端开发领域，"CheckBox分级选中 复选框 上下级 联动"是一个常见的功能需求，通常应用于具有层级结构的数据展示和交互场景，比如树形菜单、组织架构选择等。这个功能的核心是实现复选框...
多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker stepper input ，引用组件或者复制粘贴使用，提高工作效率。
本文将详细讲解如何实现一个带有复选框（Checkbox）的树形列表（TREE LIST）的级联选择功能，以及相关的Java标签形式实现。这种功能常见于权限管理、组织结构选择等场景，让用户能够方便地进行多层级的勾选操作。 ...
4. **级联逻辑**：当用户选择或取消选择一个节点时，需要更新其所有子节点的状态。这可能涉及到递归遍历数据结构，并根据父节点的选中状态来设置子节点的选中状态。 5. **UI更新**：在状态改变后，需要同步更新UI。...
一个简单html页面，实现省市的三级级联选择，根据不同情况可以控制不同展现。
ExpandAbleListView+checkbox数组方式级联，外层列表可展开收起，内层列表使用checkbox多选框，点击之后可在顶部的gridlayout显示，顶部显示的选中与checkbox选中状态关联，点击顶部选中的item，可取消选中状态，...
### js实现TreeView 级联选择 在前端开发中，TreeView 控件是非常常见的一个功能组件，主要用于展示层次化的数据结构。而级联选择是指当用户选择一个节点时，该节点的所有子节点也会自动被选中（全选）或取消选中...
这个插件可能包含了对原有Tree节点UI的扩展，添加了复选框（Checkbox）以便用户进行选择操作，并且包含了级联选择的逻辑，确保了父子节点之间的状态同步。 使用这个扩展插件通常包括以下几个步骤： 1. 引入`...
flex tree+checkbox可实现级联勾选 修改后 修改CheckTreeDemoRenderer.as这个文件中 while (!cursor.afterLast){ if (cursor.current.@state == STATE_CHECKED) { noChecks++; }else if (cursor.current.@state =...