ラジオボタンのボタン化
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="radio" autocomplete="off" checked> ラジオボタン１ </label> <label class="btn btn-default"> <input type="radio" autocomplete="off"> ラジオボタン２ </label> <label class="btn btn-default"> <input type="radio" autocomplete="off"> ラジオボタン３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" autocomplete="off" checked> ラジオボタン１ </label> <label class="btn btn-primary"> <input type="radio" autocomplete="off"> ラジオボタン２ </label> <label class="btn btn-primary"> <input type="radio" autocomplete="off"> ラジオボタン３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="radio" autocomplete="off" checked> ラジオボタン１ </label> <label class="btn btn-success"> <input type="radio" autocomplete="off"> ラジオボタン２ </label> <label class="btn btn-success"> <input type="radio" autocomplete="off"> ラジオボタン３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-info active"> <input type="radio" autocomplete="off" checked> ラジオボタン１ </label> <label class="btn btn-info"> <input type="radio" autocomplete="off"> ラジオボタン２ </label> <label class="btn btn-info"> <input type="radio" autocomplete="off"> ラジオボタン３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-warning active"> <input type="radio" autocomplete="off" checked> ラジオボタン１ </label> <label class="btn btn-warning"> <input type="radio" autocomplete="off"> ラジオボタン２ </label> <label class="btn btn-warning"> <input type="radio" autocomplete="off"> ラジオボタン３ </label> </div> <hr> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-danger active"> <input type="radio" autocomplete="off" checked> ラジオボタン１ </label> <label class="btn btn-danger"> <input type="radio" autocomplete="off"> ラジオボタン２ </label> <label class="btn btn-danger"> <input type="radio" autocomplete="off"> ラジオボタン３ </label> </div> <hr>