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