Bootstrap で横並びラジオボタンを作ってその値を JavaScript から取得する方法

phi phi on bootstrap

地味にこれやってる良い感じの情報がなかったので メモがてら作ってみました .

デモ

こちらデモになります. ラジオボタンが表示され押すとそれに対応した文字列がコンソールに表示されるのがわかると思います.

[runstant]

ソースコード

html

ラジオボタンを構成する部分です

<div id='mode' class="btn-group" data-toggle="buttons">  
    <label class="btn btn-primary active">
        <input type="radio" autocomplete="off" value="left"> Left
    </label>
    <label class="btn btn-primary">
        <input type="radio" autocomplete="off" value="middle"> Middle
    </label>
    <label class="btn btn-primary">
        <input type="radio" autocomplete="off" value="right"> Right
    </label>
</div>  

javascript

値を表示しているコード部分です

$(function() {
    $('#mode input[type=radio]').change( function() {
        console.log(this.value);
    });
})

解説

やっていることはシンプルで, ラジオボタンのタイプが変更された際の イベントリスナを登録して, その際に bind されている this の value を表示しているだけです.

    $('#mode input[type=radio]').change( function() {
        console.log(this.value);
    });