html+javascript+bootstrap实现层级多选框全层全选和多选功能


Posted in Javascript onMarch 09, 2017

想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里, 查到这文,非常详细,如果大家需要做前面所说的功能,可以参考这个地址,http://mrthink.net/jquery-plugin-iselecttags/

     但是,考虑到如果要做一个选项数不确定、可能非常多,用标签会容易视觉疲劳,同时要求随着选项数的变化,最小程度影响网页布局和效果,于是选择用层级的多选框,也就是设置电脑的那种常见效果。第二层选项可以折叠/展开到第一层下面,用bootstrap的 data-toggle="collapse" data-target="#demo1" 进行关联第二层折叠效果。

     具体代码如下:

<script>
//当第一层选项选定,则该选项下的第二层全部被选定
  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;
    }
  }
</script>
<style>
  ul li{
    list-style:none;
  }
</style>
<div>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v1" value="version1" onclick="allSelect('checkbox_v1', 'checkbox1')"><a data-toggle="collapse" data-target="#demo1">版本一<b class="caret"></b></a>
  <ul id="demo1" class="collapse in">
    <li> <input type="checkbox" checked name="checkbox1" value="layer1" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">v1.0.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer2" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">V1.1.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer3" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">V1.2.1</li>
    <li> <input type="checkbox" checked name="checkbox1" value="layer4" onclick="singleSelect2parent('checkbox_v1', 'checkbox1')">V1.3.1</li>
  </ul>
</div>
<div>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v2" value="version2" onclick="allSelect('checkbox_v2', 'checkbox2')"><a data-toggle="collapse" data-target="#demo2">版本二<b class="caret"></b></a>
  <ul id="demo2" class="collapse in">
    <li> <input type="checkbox" checked name="checkbox2" value="layer5" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')">V2.0.1</li>
    <li> <input type="checkbox" checked name="checkbox2" value="layer6" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')">V2.1.1</li>
    <li> <input type="checkbox" checked name="checkbox2" value="layer7" onclick="singleSelect2parent('checkbox_v2', 'checkbox2')">V2.2.1</li>
  </ul>
</div>
<div>
  <input class="checkbox2check" type="checkbox" checked name="checkbox_v3" value="version3" onclick="allSelect('checkbox_v3', 'checkbox3')"><a data-toggle="collapse" data-target="#demo3">版本三<b class="caret"></b></a>
  <ul id="demo3" class="collapse in">
    <li> <input type="checkbox" checked name="checkbox3" value="layer8" onclick="singleSelect2parent('checkbox_v3', 'checkbox3')">V3.0.1</li>
    <li> <input type="checkbox" checked name="checkbox3" value="layer9" onclick="singleSelect2parent('checkbox_v3', 'checkbox3')">V3.1.1</li>
    <li> <input type="checkbox" checked name="checkbox3" value="layer10" onclick="singleSelect2parent('checkbox_v3', 'checkbox3')">V3.2.1</li>
  </ul>
</div>
<button type="button" onclick="allChecked()">全选</button>

以上所述是小编给大家介绍的html+javascript+bootstrap实现层级多选框全层全选和多选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
Node.js常用工具之util模块
Mar 09 #Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 #Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 #Javascript
js实现简单的二级联动效果
Mar 09 #Javascript
jquery表单提交带错误信息提示效果
Mar 09 #Javascript
AngularJS 防止页面闪烁的方法
Mar 09 #Javascript
js读取json文件片段中的数据实例
Mar 09 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python实现图像识别功能
2018/01/29 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python如何将函数值赋给变量
2020/04/28 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
css sprite简单实例
2016/05/23 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
经理任命书模板
2014/06/06 职场文书
加油口号大全
2014/06/13 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
杨善洲观后感
2015/06/04 职场文书
团拜会主持词
2015/07/04 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS