基于bootstrap的单选(radio)或者多选(checkbox)的选择框组
完成的效果如下图所示:
html代码如下:
<!-- 两行组 -->
<div class="box">
<ul class="list-group">
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
</ul>
</div>
<!-- 三行组 -->
<div class="box">
<ul class="list-group">
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
</ul>
</div>
<!-- 四行组 -->
<div class="box">
<ul class="list-group">
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
<li class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span>
<input type="text" class="form-control">
</li>
</ul>
</div>
css样式的代码如下:
@charset "UTF-8";
/*复选框输入框组css样式*/
.list-group .first .input-group-addon{
border-bottom:;
border-bottom-left-radius:;
}
.list-group .first .form-control{
border-bottom:;
border-bottom-right-radius:;
}
.list-group .last .input-group-addon{
border-top-left-radius:;
}
.list-group .last .form-control{
border-top-right-radius:;
}
.list-group .middle .input-group-addon{
border-bottom:;
border-top-left-radius:;
border-bottom-left-radius:;
}
.list-group .middle .form-control{
border-bottom:;
border-bottom-right-radius:;
border-top-right-radius:;
}
js的代码如下:
// 复选框输入框组js代码
$(function(){
var obj = $('ul.list-group');
obj.each(function(){
var li_obj = $(this).find('li');
var len = li_obj.length;
if (len>1) {
li_obj.first().addClass('first');
li_obj.last().addClass('last');
if(len>2){
var loop_len = len-2;
for (var i = 0; i < loop_len; i++) {
li_obj.eq(1+i).addClass('middle');
}
}
}
});
});
基于bootstrap的单选(radio)或者多选(checkbox)的选择框组的更多相关文章
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- 用jquery修改默认的单选框radio或者复选框checkbox选择框样式
默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控 ...
- 【JavaScript&jQuery】单选框radio,复选框checkbox,下拉选择框select
HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- 基于 Bootstrap 的扁平化 UI 开发包
Flat UI是一款基于Bootstrap的扁平化前端UI工具包,Flat UI的组件外观设计非常清新和漂亮,Flat UI的组件包含按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块 ...
- 【转】基于Bootstrap的超酷jQuery开关按钮插件
基于Bootstrap的超酷jQuery开关按钮插件
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
随机推荐
- form表单提交到Controller之后空值变成逗号
首先这个错误不是我遇到的,是别人遇到来找我给帮忙调试的(我不会犯这种错误!!!) 错误非常神奇,前端页面的form表单是空的啥都没填,提交到后台之后(后台用@ModelAttribute实体类接受的) ...
- dgango 报错: Timeout when reading response headers from daemon process
问题: image = np.asarray(bytearray(f.read()), dtype="uint8")cv2_img = cv2.imdecode(image, cv ...
- vue-quill-editor html编辑器
在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频) https://www.cnblogs.com/zhengweijie/p/7305903.html vue-quil ...
- Jmeter创建web测试计划
创建web测试计划 在这一章,我们将学习如何创建基本的测试计划来测试一个web网站.您将创建五个用户并发送请求到JMeter网站的两个页面.同时,设置用户运行测试两次.因此,请求的总数是(5个用户)x ...
- java.utils.UUID类介绍
1 UUID介绍 UUID (Universally Unique Identifier)缩写,即通用唯一识别码,也是被开源软件基金会 (Open Software Foundation, OSF) ...
- lua默认是double类型
把c#的float类型传给lua ,lua自己换转成double ,一转就出精度问题 lua只有double没有float ===================================== ...
- angularjs 判断是否包含 permIDs|filter:'10'
<div class="span12 tools"> <ul class="row-fluid" id=&quo ...
- VMWARE 12安装Tools
准备条件 1.yum install perl 2.yum install gcc 接着就是挂载安装 新建cdrom挂载目录mkdir /mnt/cdrom挂载光驱mount -t auto /dev ...
- VMware Workstation 12激活码
VMware Workstation 12 Pro key/注册码: VY1DU-2VXDH-08DVQ-PXZQZ-P2KV8 VF58R-28D9P-0882Z-5GX7G-NPUTF YG7XR ...
- 宏定义中的反斜杠"\"和宏定义的细节说明
转载自:http://www.wtoutiao.com/p/K6csca.html 在阅读C语言代码经常可以看到代码中出现反斜杠"\",不是很明白它的意思,遂对反斜杠"\ ...