PHPackages                             ltxlong/cascadebox - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. ltxlong/cascadebox

ActiveJs

ltxlong/cascadebox
==================

Multi level multi select checkbox plug-in (js多级联动多选插件)

841JavaScript

Since Sep 15Pushed 7y agoCompare

[ Source](https://github.com/ltxlong/cascadebox)[ Packagist](https://packagist.org/packages/ltxlong/cascadebox)[ RSS](/packages/ltxlong-cascadebox/feed)WikiDiscussions master Synced 4d ago

READMEChangelogDependenciesVersions (1)Used By (0)

cascadebox
==========

[](#cascadebox)

js多级联动多选checkbox插件 [![image](https://github.com/ltxlong/cascadebox/raw/master/cascadebox%E6%88%AA%E5%9B%BE.png)](https://github.com/ltxlong/cascadebox/blob/master/cascadebox%E6%88%AA%E5%9B%BE.png)

使用说明
====

[](#使用说明)

```
 //这个div的id随便取名
```

- 参数1：插入cascadebox的div的id；
- 参数2：checkbox的name；
- 参数3：cascadebox所有选择项的数据；
- 参数4：预设选中的数据，可以为空(不传)或\[\]；
- 参数5：各级别名称，可以无限级，如果为空(不传)或\[\]，默认为3个级别，名称为\['一级选项','二级选项','三级选项'\]
- 参数6：是否开启全选模式，可以为空(不传)，默认为true
- 参数7：是否开启选中颜色加深，可以为空(不传)，默认为true。注意，选项太多的时候，开启会导致卡顿
- 参数8：对立cascadebox的div的id(两个cascadebox有同样的选项，是对立关系，一个选项只能在其中一个cascadebox被选中)，可以为空(不传)，默认为null
- data的格式为：直接将每个节点push进去就行，即data.push(node\_obj)；如果想用本插件，但是数据格式不一致的，可以自己写js转换下就行了
- data节点参数说明：
- id：选项的id值 (必须)
- name：选项显示名称 (必须)
- parent\_id：选项的父id，顶级选项或者没有父选项可以没有这个参数 (可选)
- level：选项的等级，顶级选项的level为0 (必须)
- no\_checkbox：是否带复选框,true为不带，如果想默认带复选框，不带这个参数即可 (可选)
- cascadebox最终选中值：
- 以父级为优先，即如果一个项，如果它有子级，并且子级全选了，那么最终显示选中值为该项。
- 如果子级不全选，则只显示选中的子级
- 想要不以父级为优先，即父级节点的no\_checkbox参数为true，不显示复选框即可
- 获取选中的项：obj.get\_data()方法
- 重新设置选中的项：obj.set\_data(select\_arr)方法
- 重新设置选中的项：obj.set\_data\_only(select\_arr)方法（和set\_data方法的区别是，set\_data\_only仅仅是显示和打钩选中项，没顾及全选和颜色加深）
- 增加选中项：obj.add\_val(id)方法
- 删除选中项：obj.del\_val(id)方法
- 显示某选项(包括其所有子选项)：obj.show\_item(id)方法
- 隐藏某选项(包括其所有子选项,并且删除选中)：obj.hide\_item(id)方法
- 隐藏某选项(包括其所有子选项,不会删除选中)：obj.hide\_item\_only(id)方法
- 注意：隐藏某选项，在全选的时候，还是会选中的 = =

```
var pre_select_data = ["c_1", "c_2", "c_3", "c_4", "c_5", "c_6", "c_7", "c_8", "c_9"];
var cascadebox_header = [];
//var cascadebox_header = ['省份','城市','区县'];
//如果想某一级别的cascadebox_header显示父级的名称，那么只要传参为''即可。
//例如想要城市级别的cascadebox_header动态显示父级名称，即传参应为['省份','','区县']。
//var obj = cascadeBox('cascadebox','checkboxname',data); //初始化插件，返回cascadeBox实例
var obj = cascadeBox('cascadebox','checkboxname',data,pre_select_data,cascadebox_header,true,true,null);

var select_data = obj.get_data();

//两个cascadebox对立关系：
//var include_obj = cascadeBox('cascadebox_include','checkboxname_include',data,pre_select_data,cascadebox_header,true,true,'cascadebox_exclude');
//var exclude_obj = cascadeBox('cascadebox_exclude','checkboxname_exclude',data,pre_select_data,cascadebox_header,true,true,'cascadebox_include');
```

结合bootstrap，拥抱响应式： [![image](https://github.com/ltxlong/cascadebox/raw/master/%E7%BB%93%E5%90%88bootstrap1.png)](https://github.com/ltxlong/cascadebox/blob/master/%E7%BB%93%E5%90%88bootstrap1.png)[![image](https://github.com/ltxlong/cascadebox/raw/master/%E7%BB%93%E5%90%88bootstrap2.png)](https://github.com/ltxlong/cascadebox/blob/master/%E7%BB%93%E5%90%88bootstrap2.png)[![image](https://github.com/ltxlong/cascadebox/raw/master/%E7%BB%93%E5%90%88bootstrap3.png)](https://github.com/ltxlong/cascadebox/blob/master/%E7%BB%93%E5%90%88bootstrap3.png)[![image](https://github.com/ltxlong/cascadebox/raw/master/%E7%BB%93%E5%90%88bootstrap4.png)](https://github.com/ltxlong/cascadebox/blob/master/%E7%BB%93%E5%90%88bootstrap4.png)

本插件开发源于业务上要移植今日头条的广告页面，要用到这一功能。

感谢
==

[](#感谢)

本插件在 [tntreebox](https://github.com/binwind8/tntreebox) 的基础上进行重构，优化并且增加了很多新功能

###  Health Score

21

—

LowBetter than 19% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/26790349?v=4)[ltxlong](/maintainers/ltxlong)[@ltxlong](https://github.com/ltxlong)

---

Top Contributors

[![ltxlong](https://avatars.githubusercontent.com/u/26790349?v=4)](https://github.com/ltxlong "ltxlong (81 commits)")

### Embed Badge

![Health badge](/badges/ltxlong-cascadebox/health.svg)

```
[![Health](https://phpackages.com/badges/ltxlong-cascadebox/health.svg)](https://phpackages.com/packages/ltxlong-cascadebox)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)