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 相关文章推荐
Jquery 获取checkbox的checked问题
Nov 16 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python用for循环实现九九乘法表
2018/05/31 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python 从attribute到property详解
2020/03/05 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
python中什么是面向对象
2020/06/11 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
生产部厂长助理职位说明书
2014/03/03 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
临时用工协议书范本
2014/10/29 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
鸟的天堂导游词
2015/01/31 职场文书
班级联欢会主持词
2015/07/03 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
Go语言读取txt文档的操作方法
2022/01/22 Golang
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫