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无缝滚动代码
Jan 03 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
Vue.js用法详解
Nov 13 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
Javascript 继承实现例子
2009/08/12 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
javascript闭包的理解
2015/04/01 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
中学运动会广播稿
2014/01/19 职场文书
个人课题方案
2014/05/08 职场文书
经理任命书模板
2014/06/06 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
2014年食堂工作总结
2014/11/20 职场文书
社区义诊通知
2015/04/24 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
python tkinter Entry控件的焦点移动操作
2021/05/22 Python