Bootstrap 引导单选按钮：在提交表单时获取选定值

kd3sttzy 于 2023-06-04 发布在 Bootstrap

关注(0)|答案(6)|浏览(207)

我有下一个Bootstrap单选按钮：

<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>

class属性中的active值是单击按钮时更改的值。

twitter-bootstrap

来源：https://stackoverflow.com/questions/21673985/bootstrap-radio-button-get-selected-value-on-submitting-the-form

6条答案

按热度按时间

jchrr9hc1#

在表单提交处理程序中，使用:checked选择器。

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

赞(0）回复(0）举报 2023-06-04

wvmv3b1j2#

您应该设置一个公共name属性来标识表单：

<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();

赞(0）回复(0）举报 2023-06-04

o7jaxewo3#

试试这个：

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

有关:checked选择器和.val属性的更多信息，请查看jQuery的文档。

赞(0）回复(0）举报 2023-06-04

oyjwcjzk4#

代码中存在一些逻辑问题：

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

这个标签有active类，所以Bootstrap会将它显示为活动的，但不检查包含的输入单选，所以在纯HTML中，它不被检查。
正确代码：

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

赞(0）回复(0）举报 2023-06-04

kse8i1jr5#

使用jQuery的:checked选择器

赞(0）回复(0）举报 2023-06-04

cqoc49vn6#

使用jQuery的.prop()属性，就像这样：

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

赞(0）回复(0）举报 2023-06-04

我来回答

Bootstrap 引导单选按钮：在提交表单时获取选定值

6条答案

相关问题

热门标签

最新问答