テレットブログ

【Bootstrap】checkbox利用による複数選択ボタンサンプル

2020年06月05日
image

checkbox利用による複数選択ボタンサンプル

toggle不使用
checkboxで複数選択をスマートに利用する
クリックで選択にて選択可能


 

See the Pen multiple botton by terreto (@terreto) on CodePen.



 
<div class="container">
    <h2>Multiple items selector with filter</h2>
    <div class="row">
        <div class="form-group">
            <div class="items-collection">

                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group bizmoduleselect">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-car fa-2x"></span>
                                    <h5>car</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group itemcontent">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-truck fa-2x"></span>
                                    <h5>truck</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group itemcontent">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-laptop fa-2x"></span>
                                    <h5>laptop</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group itemcontent">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-cube fa-2x"></span>
                                    <h5>cube</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group itemcontent">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-lock fa-2x"></span>
                                    <h5>secure</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>                
                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group itemcontent">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-barcode fa-2x"></span>
                                    <h5>barcode</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>                
                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group itemcontent">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-key fa-2x"></span>
                                    <h5>key</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>                
                <div class="items col-xs-6 col-sm-3 col-md-3 col-lg-3">
                    <div class="info-block block-info clearfix">
                        <div data-toggle="buttons" class="btn-group itemcontent">
                            <label class="btn btn-default">
                                <div class="itemcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                    <span class="fa fa-keyboard-o fa-2x"></span>
                                    <h5>keyboard</h5>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>                

            </div>
        </div>
    </div>
    <div class="row">
        <br>
        <div class="form-group">
            <div class="col-sm-12 col-md-12 col-lg-12">                
                <i class="fa fa-search fa-2x pull-left searchicon"></i><input type="search" class="form-control" id="search" placeholder="Filter items...">
            </div>
        </div>
    </div>    
</div>

<style>
#search {
    width:90%;
}

.searchicon {
    color:#5CB85C;
}

.items-collection{
    margin:20px 0 0 0;
}
.items-collection label.btn-default.active{
    background-color:#007ba7;
    color:#FFF;
}
.items-collection label.btn-default{
    width:90%;
    border:1px solid #305891;
    margin:5px; 
    border-radius: 17px;
    color: #305891;
}
.items-collection label .itemcontent{
    width:100%;
}
.items-collection .btn-group{
    width:90%
}
</style>

<script>
$(function () {
    $('#search').on('keyup', function () {
        var pattern = $(this).val();
        $('.items-collection .items').hide();
        $('.items-collection .items').filter(function () {
            return $(this).text().match(new RegExp(pattern, 'i'));
        }).show();
    });
});
</script>






新着記事

image

CodeIgniter3でリダイレクトでセッション消える

2020年10月28日
テストサーバ(http)にて確認していると 管理画面ではセッションが空に!
Read more →
image

防衛省、サイバーセキュリティ担当の防衛技官を募集中月給30万円

2020年10月16日
 防衛省が、サイバーセキュリティに従事する防衛技官を募っている。自衛隊のシステム
Read more →
image

Amazon Echo Auto アマゾンエコーオート 開封&利用一週間レビュー

2020年10月08日
早速アマゾン・エコーオートを購入して車に取り付けて利用してみました! 報道
Read more →
image

【Amazon】アマゾン 年に1度のプライムデー開催情報

2020年10月06日
Amazon プライムデーが開催されます Amazonプライムデー
Read more →
image

Amazonの車載デバイス「Echo Auto」が発売!

2020年10月01日
「OK Google」「Hi Siri」「Hi Mercedes」といった音声に
Read more →
Choose Colour