シャーブロウの答えから導き出されたエレガントなソリューション。これにより、いくつかのBootstrapスタイルのラジオボタンを使用して、1行のコードで非表示の入力と同期させることができます。あなたがする必要があるのは常に.btn-groupの中に隠された入力を置くことです。
HTML:
<!-- Vehicle
================================================== -->
<div class="control-group">
<label class="control-label" for="selectRecipients">Vehicle</label>
<div class="controls">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" value="car">Car</button>
<button type="button" class="btn" value="bicyle">Bicycle</button>
<input type="hidden" name="vehicle" value=""></input>
</div>
</div>
</div>
<!-- Food
================================================== -->
<div class="control-group">
<label class="control-label" for="selectRecipients">Vehicle</label>
<div class="controls">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" value="apples">Apples</button>
<button type="button" class="btn" value="oranges">Oranges</button>
<input type="hidden" name="food" value=""></input>
</div>
</div>
</div>
JQUERY:
/** Associate UI-only radio buttons with hidden fields **/
$('[data-toggle="buttons-radio"] > button').on('click', function() {
$(this).parent().find('input[type=hidden]').val( $(this).val() );
alert( $(this).parent().find('input[type=hidden]').val() );
});
デモ: http: //jsfiddle.net/KyHMp/1/
ライブ設定では、ボタンの1つをデフォルトのアクティブボタン(.active)として設定し、非表示フィールドにデフォルト値を指定します。
私はそれが誰かを助けることを願っています。