html bootstrap复选框全选,javascript+bootstrap+html实现层级多选框全层全选和多选功能代码实例...
想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里,接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能,需要的朋友参考下
想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里, 查到这文,非常详细,如果大家需要做前面所说的功能,
但是,考虑到如果要做一个选项数不确定、可能非常多,用标签会容易视觉疲劳,同时要求随着选项数的变化,最小程度影响网页布局和效果,于是选择用层级的多选框,也就是设置电脑的那种常见效果。第二层选项可以折叠/展开到第一层下面,用bootstrap的 data-toggle="collapse" data-target="#demo1"进行关联第二层折叠效果。
具体代码如下:
//当第一层选项选定,则该选项下的第二层全部被选定
function allSelect(check_v, checkname) {
var v_item = document.getElementsByName(check_v);
var items = document.getElementsByName(checkname);
for (var i = 0; i < items.length; ++i) {
if (v_item[0].checked) {
items[i].checked = true;
}
else {
items[i].checked = false;
}
}
}
//当第二层选项全部被选定,则第一层被选定;若第二层选项至少有一个没被选定,则第一层不被选定
function singleSelect2parent(check_v, checkname) {
var v_item = document.getElementsByName(check_v);
var items = document.getElementsByName(checkname);
var childStatus = true;
for (var i = 0; i < items.length; ++i) {
childStatus = (childStatus && items[i].checked);
}
if (childStatus) {
v_item[0].checked = true;
}
else {
v_item[0].checked = false;
}
}
//全选按钮,点击全选,则所有选项被选中
function allChecked() {
var inputItems = document.getElementsByClassName("checkbox2check");
for (var i = 0; i < inputItems.length; i++) {
var checkItems = document.getElementsByName("checkbox" + (i+1));
for (var j = 0; j < checkItems.length; j++) {
checkItems[j].checked = true;
}
inputItems[i].checked = true;
}
}
ul li{
list-style:none;
}
版本一
- v1.0.1
- V1.1.1
- V1.2.1
- V1.3.1
版本二
- V2.0.1
- V2.1.1
- V2.2.1
版本三
- V3.0.1
- V3.1.1
- V3.2.1
全选
html bootstrap复选框全选,javascript+bootstrap+html实现层级多选框全层全选和多选功能代码实例...相关推荐
- 非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 ...
- Javascript实现划词标记+划词搜索功能代码实例
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> ...
- 基于Python实现体育彩票选号器功能代码实例
更多编程教程请到:菜鸟教程 https://www.piaodoo.com/ 友情链接:好看站 http://www.nrso.net/ 高州阳光论坛https://www.hnthzk.com/ 一 ...
- html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的 其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答 当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡 先来看看页面效果吧: 点击抽取 ...
- html复选框美化插件,Bootstrap复选框和单选按钮美化插件
awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件.它使用纯CSS编写,没有任何的javascript文件.它通过在原生Bootstrap组件的 ...
- html 下拉多选框代码,js实现下拉复选框效果(代码实例)
本章给大家带来用js实现下拉复选框效果(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果: 下面我们看看代码: HTML代码: HTML CSS JavaScri ...
- html表单设置单选框,html如何实现表单的选择框效果?单选框与多选框的实现(代码实例)...
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意.本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例).通过单选框代码和复选框代码实例,实现单选框样 ...
- 技术干货 | “选图预览并上传”的场景如何解?全网最全方案汇总来了
简介: 你真的知道如何"上传"一张照片吗? 选择本地相册图片或者拍照,然后预览并且上传是移动应用中一个典型的使用场景,比如常见的身份证信息上传等. 不少客户都反馈有类似的场景,并且 ...
- 下拉多选框 微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
最新文章
- linux下mysql修改字符集,远程连接
- 关于hard-negative mining
- Kafka集群在马蜂窝大数据平台的优化与应用扩展
- java 键入_在Java中键入Safe SQL
- .pfx 证书和 .cer 证书
- 日语阅读-1-如何看ほう的用法
- java中this和super的用法区别
- python打印网页成pdf_如何使用Python将网页转换为PDF
- 基于Python的植被覆盖度时空变化规律分析
- 谷歌查排名php,谷歌排名检查:PHP函数来获得googlerank关键词 | LsevenTT博客-站群哥...
- yocto之相关class总结
- 麦吉尔电子计算机工程专业好么,多大/UBC/麦吉尔,什么专业最厉害?
- 依靠语言和依靠图书馆
- 接力和隔空投送无效、handoff airdrop无效
- 1080p显示器与2k的差别究竟有多大?该如何选择
- Php公众号自定义菜单设置,教你设置微信公众号自定义菜单!,来看看吧
- 何登成对Innodb加锁的分析
- 【Linux】Linux进程的创建与管理
- vue watch的用法及新旧值一样问题解决
- 让人混淆的Person p=new Person();和Person p=null;
热门文章
- windows7无人值守应答文件.rar_数智化赋能人力共享运营,人力管理走向“无人值守”...
- MongoDB 操作范例
- html5 observer api,基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
- sigquit信号默认忽略吗_老妹儿,你真的搞懂了 Shell 信号吗?
- mkenvimage
- java中domain什么意思_java解析URL中domain、端口和协议的两种方法
- 【转】VTK修炼之道2_VTK体系结构1
- 【转】3:C#异步WaitAll的使用
- 【转】Dynamics 365Online 如何启用手机端APP的离线功能
- Knockout学习笔记之二($root,$parent及$data的区别)