bootstrap多选框
不多说,先上图片
本多选框是用的bootstrap的样式为基础,将弹出框css改造,然后自己写的js得到。
下面为全部页面的代码,需要的可以自己改动js,得到自己需要的效果
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style>
li {
width:60px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">多选框</h1>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">选择流量包</div>
<!--保存多选框的id-->
<input type="hidden" id="ids" />
<input class="form-control" type="text" id="txt" onclick="show(this)" placeholder="选择流量包" readonly style="width:350px">
<div class="popover fade bottom in" id="panel" style="display:block;opacity:0">
<div class="arrow"></div>
<div class="popover-title" style="height:35px;">
<div class="checkbox" style="margin-top:0;margin-bottom:0px;"></div><label><input type="checkbox" onchange="CheckAll(this)" />全选</label>
<button type="button" class="close" onclick="hide()">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="popover-content">
<ul class="list-inline" id="ul" >
<!--<li><div class="checkbox"></div><label><input type="checkbox" value="0" onclick="Choose(this)"/>5M</label></li>-->
</ul>
</div>
</div>
</div>
</div> </div>
</body>
</html>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script>
var data = ["5M", "10M", "20M", "30M", "50M", "70M", "100M", "150M", "200M", "500M", "1024M"];
var objArr = [];
for (var i = 0; i < data.length; i++) {
var obj = new Object();
obj.id = i;
obj.value=data[i];
objArr.push(obj);
}
$(function () {
//加载多选框的数据
var ul = $("#ul");
for (var i = 0; i < objArr.length; i++) {
ul.append("<li><div class='checkbox'></div><label><input type='checkbox' value=" + objArr[i].id + " onclick='Choose(this)'/>" + objArr[i].value + "</label></li>");
}
});
//显示多选框
function show(t) {
//设置多选框显示的位置,在选择框的中间
var left = t.offsetLeft + t.clientWidth / 2 - $("#panel")[0].clientWidth / 2
var top = t.offsetTop + t.clientHeight + document.body.scrollTop;
$("#panel").css("opacity", "1");
$("#panel").css("margin-left", left);
$("#panel").css("margin-top", top + 5);
}
//隐藏多选框
function hide() {
$("#panel").css("opacity", "0");
}
//全选操作
function CheckAll(t) {
var name = "";
var ids = "";
var popoverContent = $($(t).parent().parent().parent().children()[2]);
popoverContent.find("input[type=checkbox]").each(function(i,th) {
th.checked = t.checked;
if (t.checked) {
name += $(th).parent().text() + ",";
ids += $(th).val() + ",";
}
});
name = name.substr(0, name.length - 1);
ids = ids.substr(0, ids.length - 1);
$("#txt").val(name);
$("#ids").val(ids);
} //勾选某一个操作
function Choose(t) {
var oldName = $("#txt").val();
var name = oldName == "" ? "," + $("#txt").val() : "," + $("#txt").val() + ",";
var ids = oldName == "" ? "," + $("#ids").val() : "," + $("#ids").val() + ",";
var newName = $(t).parent().text();
var newid = $(t).val(); if (t.checked) {//选中的操作
$("#txt").val(name += newName + ",");
$("#ids").val(ids += newid + ",");
} else {//去掉选中的操作
var index = name.indexOf(","+newName+",");
var len = newName.length;
name = name.substring(0, index) + name.substring(index + len + 1, name.length); var index = ids.indexOf("," + newid + ",");
var len = newid.length;
ids = ids.substring(0, index) + ids.substring(index + len + 1, ids.length);
}
name = name.substr(1, name.length - 2);
ids = ids.substr(1, ids.length - 2);
$("#txt").val(name);
$("#ids").val(ids);
}
</script>
bootstrap多选框的更多相关文章
- bootstrap复选框和单选按钮
复选框和单选按钮标签包含在<Label>标签中<div class="checkbox"> <label><input type=&quo ...
- 转载:Bootstrap之表格checkbox复选框全选
转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...
- Bootstrap之表格checkbox复选框全选
效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...
- Bootstrap之表格checkbox复选框全选 [转]
转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...
- bootstrap table 复选框选中后,翻页不影响已选中的复选框
使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...
- bootstrap table保留多选框的分页
有时候需要完成这种情况: 1.需要设置的是如果第一页点击复选框然后点击其他页面的话,第一页的选项被保存了 2.将所有选择好的复选款的数据保存在数组中 bootstrap table官方文档http:/ ...
- Bootstrap 历练实例 - 按钮(Button)插件复选框
复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...
- bootstrap历练实例:复选框或单选按钮作为输入框组的前缀或后缀
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:复选框(Checkbox)和单选框(Radio)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- koa的跨域访问
koa跨域访问:1.安装插件 npm install koa-cors --save-dev2.项目的app.js中var cors = require('koa-cors'); app.use(co ...
- 面试题:hibernate 第二天 快照 session oid 有用
## Hibernate第二天 ## ### 回顾与反馈 ### Hibernate第一天 1)一种思想 : ORM OM(数据库表与实体类之间的映射) RM 2)一个项目 : CRM 客户关系管理系 ...
- Java-马士兵设计模式学习笔记-工厂模式-用Jdom模拟Spring
一.概述 1.目标:模拟Spring的Ioc 2.用到的知识点:利用jdom的xpath读取xml文件,反射 二.有如下文件: 1.applicationContext.xml <?xml ve ...
- ZROI2018普转提day2t1
传送门 分析 我们通过仔细研究不难发现对于一次交换(i,i+1)的操作之后,在i之前的点就不可能跑到i之后,i+1之后的的点也不可能跑到i+1之前,所以这个序列在一次交换之后就相当于被分成了两个部分. ...
- 数据结构_成绩查询_cjcx
问题描述 录入 n 个学生的成绩,并查询.★数据输入第一行输入包括 n. m(1<=n<=50,000,1<=m<=100,000)两个数字.接下来 n 行,每行包含名字和成绩 ...
- mysql--笔记1
今日内容介绍1.MySQL数据库2.SQL语句=========================================================1 数据库概念 1.1: 什么是数据库 ...
- 小小c#算法题 - 12 - Joseph Circle(约瑟夫环)
约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数(从1开始报数),数到m的那个人出列:他的下一个人又从1开始报数,数到m的那个人又 ...
- delphi xe6 android ListView增加 Header或Footer 的方法
var Item1: TListViewItem;begin Item1 := ListView1.Items.Add; Item1.Purpose:=TListItemPurpose. ...
- MODI中的OCR模块
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2012.07.02更新:2012.07.09补充非简体中文版内容 自从基于MODI的DjVuToy.FreePic2Pdf. ...
- java 获取前几天时间
java 获取前几天时间 一.toLocaleString()函数过时: //当前时间 Date endDate=new Date(); String endTime=endDate.to ...