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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
js编写简单的计时器功能
Jul 15 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
WebWorker 封装 JavaScript 沙箱详情
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
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python中xrange用法分析
2015/04/15 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python实现疫情地图可视化
2021/02/05 Python
银行门卫岗位职责
2013/12/29 职场文书
写给老师的保证书
2015/05/09 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
财产分割协议书
2016/03/22 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python