基于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）的选择框组

最新文章

热门文章