获取 Twitter Bootstrap 单选按钮的值。JQuery

Question

获取 Twitter Bootstrap 单选按钮的值。JQuery

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获取用户勾选的按钮值。

我看到了几个关于这个话题的问题，但是我认为与这种按钮不同，因为它们似乎不接受“checked”属性。

任何帮助都将非常欢迎。

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

- Juliette Dupuis

6个回答

10

你可以通过将按钮的 class 设置为 "active" 来 "勾选" 该按钮：

<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>来实际存储所选数据，否则该值不会被发布在您的表单中。

- augustomen

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>

当您运行一个函数或任何东西来收集您选择的按钮时，您将运行此命令...它会获取您选择的单选按钮的值。当您单击按钮，更确切地说，当它被“选中”时，它被赋予了“active”类，就像之前的答案中所示。这是您真正需要寻找的。使用下面的这个小片段即可。

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

基本上，它使用通配符选择器查找具有“productStatus”按钮类的按钮，并返回具有“active”类的按钮的值。

- Kevin Mansel

3

我认为使用 $('.productStatus.active') 会更简洁。 - kritzikratzi

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

- bamburik

0

您可以按照以下方式获取所选内容：

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

设置按钮为活动状态

$(selector).addClass('active')

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

$('.btn-group button.btn:eq(0)').addClass('active')

- HungryCoder

0

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

alert($('.btn-group > .btn.active').attr("value"));

- Shivek Parmar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- balexandre · Accepted Answer

正如标签所述，它是一个按钮，因此，您应该按照其建议操作，并使用这些按钮...这是一个简单的示例：

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

需要注意的一点是，单击后，元素会发生变化，Bootstrap 会向单击的按钮附加一个 active 类名。

您始终可以使用此方法更改 hidden field，但如果我想要提交表单本身，我仍然会继续使用我的示例。