基于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: 0;
    border-bottom-left-radius:0;
}
.list-group .first .form-control{
    border-bottom: 0;
    border-bottom-right-radius:0;
}
.list-group .last .input-group-addon{
    border-top-left-radius:0;
}
.list-group .last .form-control{
    border-top-right-radius:0;
}
.list-group .middle .input-group-addon{
    border-bottom: 0;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.list-group .middle .form-control{
    border-bottom: 0;
    border-bottom-right-radius:0;
    border-top-right-radius:0;
}

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