基于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');
}
}
}
});
});