Bootstrap 单选按钮：在提交表单上获取选定的值答案

【问题标题】：Bootstrap radio button: Get selected value on submit formBootstrap 单选按钮：在提交表单上获取选定的值
【发布时间】：2014-03-07 14:15:31
【问题描述】：

我有下一个 boostrap 单选按钮：

<div class="btn-group" id="filterDay" data-toggle="buttons">
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="1">Monday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="2"> Tuesday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="3"> Wednesday
       </label>
       <label class="btn btn-default blue">
         <input type="radio" class="toggle" value="4"> Thursday
       </label>
       <label class="btn btn-default blue">
          <input type="radio" class="toggle" value="5"> Friday
       </label>
       <label class="btn btn-default blue">
           <input type="radio" class="toggle" value="6"> Saturday
        </label>
       <label class="btn btn-default blue active">
           <input type="radio" class="toggle" value="0"> Sunday
       </label>
</div>

我试图在提交表单时获取活动按钮的值，而不创建“onclick”事件，只需从 $('#filterDay') 按钮组中获取活动按钮。应该很容易，但我没有找到获得价值的方法。我尝试了几个示例，但都有效。

有人可以帮忙吗？

谢谢！

更新：

这是html“打印”代码：

<label class="btn btn-default blue">
   <input type="radio" class="toggle" value="6"> Saturday
</label>    
<label class="btn btn-default blue active">
        <input type="radio" class="toggle" value="0"> Sunday
</label>

类中的“活动”是我单击按钮时发生的变化。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

在表单提交处理程序中使用:checked selector

var filterDay = $('#filterDay input:radio:checked').val()

【讨论】：

那就试试var filterDay = $('#filterDay label.active input').val()

【解决方案2】：

您应该设置一个通用的“名称”来识别表单：

<div class="btn-group" id="filterDay" data-toggle="buttons">
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="1">Monday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="2"> Tuesday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="3"> Wednesday
   </label>
   <label class="btn btn-default blue">
     <input type="radio" class="toggle" name="toggle" value="4"> Thursday
   </label>
   <label class="btn btn-default blue">
      <input type="radio" class="toggle" name="toggle" value="5"> Friday
   </label>
   <label class="btn btn-default blue">
       <input type="radio" class="toggle" name="toggle" value="6"> Saturday
    </label>
   <label class="btn btn-default blue active">
       <input type="radio" class="toggle" name="toggle" value="0"> Sunday
   </label>
</div>

要获取值，可以这样获取：

$('input[name=toggle]:checked').val()

【讨论】：

【解决方案3】：

试试这个，它应该可以解决您的问题。

$( "input:checked" ).val()

您可以参考以下链接了解更多详情：
http://api.jquery.com/checked-selector/

【讨论】：

【解决方案4】：

代码中的一些逻辑问题...

<label class="btn btn-default blue active">
       <input type="radio" class="toggle" value="0"> Sunday
</label>

标签具有活动类，因此引导程序会将其显示为活动，但不检查包含的输入单选，因此在纯 html 中不检查。

正确的代码...

<label class="btn btn-default blue active">
       <input type="radio" checked="checked" class="toggle" value="0"> Sunday
</label>

【讨论】：

【解决方案5】：

使用 jquery :checked 选择器link

【讨论】：

【解决方案6】：

$('#radioButtonName').prop('checked')

这适用于

【讨论】：