12

我正在使用来自 twitter bootstrap 的单选按钮：http: //twitter.github.com/bootstrap/javascript.html#buttons。

在我的 html 中看起来像这样：

  <div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
  </div>
  <input type="submit" onclick="get_the_value_and_do_something_with_it"

我想知道如何通过 Jquery 或 Javascript 获取用户检查的按钮的值。

我看到了关于这个主题的几个问题，但我认为这种按钮有所不同，因为它们看起来不接受“已检查”属性。

非常欢迎任何帮助

PS：如果有人知道如何默认检查其中一个按钮，那也会对我有很大帮助。谢谢你。

4

6 回答 6

25

正如标签所说的那样button，为此，您应该按照它的建议进行操作，并使用这些按钮...这是一个简单的示例：

<input type="hidden" id="alignment" value="" />
<div class="btn-group alignment" data-toggle="buttons-checkbox">
    <button type="button" class="btn">Left</button>
    <button type="button" class="btn">Middle</button>
    <button type="button" class="btn">Right</button>
</div>

现在是 jQuery：

$(".alignment .btn").click(function() {
    // whenever a button is clicked, set the hidden helper
    $("#alignment").val($(this).text());
});

提交后，您将在alignment隐藏字段中找到该值。

这是一个基本示例：http: //jsbin.com/oveniw/1/

需要注意的一件好事是，在单击时，元素会发生变化，并且引导程序active会在单击的按钮上附加一个类名。

您始终可以使用它来更改hidden field，但如果我想自己提交表单，我会继续执行我的示例。

于 2012-11-12T17:50:37.213 回答
10

您可以通过将其类设置为“活动”来“检查”按钮：

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn active">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

要获得一个值，你应该有一个“值”数据，例如：

<div class="btn-group" data-toggle="buttons-checkbox" id="my_radiogroup">
  <button type="button" class="btn" data-value="0">Left</button>
  <button type="button" class="btn active" data-value="1">Middle</button>
  <button type="button" class="btn" data-value="2">Right</button>
</div>

这样，您可以通过以下方式获得价值：

$("#my_radiogroup .active").data("value");
>>> 1
(but may, of course, be undefined if no button is checked)

<input type=hidden>但请记住，除非您有实际存储所选数据的权限，否则该值不会发布在您的表单中。

于 2012-11-12T17:51:28.463 回答
5

没有理由让这变得复杂。

假设您有一个按钮组，用于选择某些东西是活动的还是非活动的......就像这样......

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="productStatus btn btn-success" value="1">Yes</button>
    <button type="button" class="productStatus btn btn-danger" value="0">No</button>
</div>

当你运行一个函数或任何东西来收集你选择的按钮时，你会运行这个命令......这会让你得到你选择的单选按钮的值。当您单击一个按钮或更多按钮时，当它被“选中”时，它会像以前的答案一样被赋予“活动”类。这就是你真正需要寻找的。下面这个小片段。

var active = $('.productStatus[class*="active"]').val();
alert(active);

基本上它使用通配符选择器寻找这个“productStatus”按钮类，然后返回具有“活动”类的按钮的值。

于 2013-03-05T05:05:50.397 回答
2

当多个 Bootstrap 单选按钮超过一个时，我使用这个钩子

$('div[data-toggle="buttons-radio"] .btn').click(function(){
    $('input[name="' + $(this).parent().attr('id') + '"]').val($(this).val());
});

在 HTML 中：

<div class="btn-group" id="rental" data-toggle="buttons-radio">
    <button type="button" class="btn" value="0">Sale</button>
    <button type="button" class="btn" value="1">Rent</button>
</div>

<input type="hidden" name="rental" value="0">
于 2013-07-17T09:46:55.997 回答
0

你可以得到如下选择：

$('.btn-group button.btn.active')

To, 设置一个按钮激活

$(selector).addClass('active')

例如，如果要将第一个按钮设置为活动状态：

$('.btn-group button.btn:eq(0)').addClass('active')
于 2012-11-12T17:50:50.807 回答
0

您可以在函数中提交表单或提交按钮的任何单击事件时检查单选按钮的值

alert($('.btn-group > .btn.active').attr("value"));
于 2014-03-01T12:34:42.790 回答