一个优雅的解决方案源自 Sherbrow 的回答。它使您可以拥有多个 Bootstrap 风格的单选按钮,并通过一行代码使它们与隐藏的输入保持同步。您需要做的就是始终在 .btn 组内放置一个隐藏的输入。
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>
查询:
/** 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/
在实时设置中,您希望将其中一个按钮设置为默认活动按钮 (.active),并为隐藏字段提供默认值。
我希望它可以帮助某人。