チェックボックスのボタン化
button.jsでチェックボックスをボタン化する方法。
ポイントは５つ。
div要素でチェックボックス群全体を括る。- チェックボックス群全体を括った
div要素のclass属性にbtn-groupを指定する。 label要素でチェックボックスを括る。- チェックボックスを括った
label要素のclass属性にbtnを指定する。更に、文脈に応じて、btn-defaultやbtn-primaryなどを指定する。 - Firefox対策として、チェックボックスである
input要素のautocomplete属性にoffを指定する。
サンプル
ソースコード
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active"> <input type="checkbox" autocomplete="off" checked> チェックボックス１ </label> <label class="btn btn-default"> <input type="checkbox" autocomplete="off"> チェックボックス２ </label> <label class="btn btn-default"> <input type="checkbox" autocomplete="off"> チェックボックス３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> チェックボックス１ </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> チェックボックス２ </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> チェックボックス３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="checkbox" autocomplete="off" checked> チェックボックス１ </label> <label class="btn btn-success"> <input type="checkbox" autocomplete="off"> チェックボックス２ </label> <label class="btn btn-success"> <input type="checkbox" autocomplete="off"> チェックボックス３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-info active"> <input type="checkbox" autocomplete="off" checked> チェックボックス１ </label> <label class="btn btn-info"> <input type="checkbox" autocomplete="off"> チェックボックス２ </label> <label class="btn btn-info"> <input type="checkbox" autocomplete="off"> チェックボックス３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-warning active"> <input type="checkbox" autocomplete="off" checked> チェックボックス１ </label> <label class="btn btn-warning"> <input type="checkbox" autocomplete="off"> チェックボックス２ </label> <label class="btn btn-warning"> <input type="checkbox" autocomplete="off"> チェックボックス３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-danger active"> <input type="checkbox" autocomplete="off" checked> チェックボックス１ </label> <label class="btn btn-danger"> <input type="checkbox" autocomplete="off"> チェックボックス２ </label> <label class="btn btn-danger"> <input type="checkbox" autocomplete="off"> チェックボックス３ </label> </div> <hr>