获取twitter bootstrap单选按钮的值.JQuery的

Question

我正在使用来自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:如果有人知道如何默认检查其中一个按钮,它也会对我有所帮助.谢谢.

Answer 1

因为标签说它是a 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,但如果我想自己提交表单,我会继续做我的示例.

Answer 2

您可以通过将其类设置为"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>要实际存储所选数据,否则该值不会在您的表单中发布.

Answer 3

没有理由让这复杂化.

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

<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"按钮类,然后返回具有"active"类的按钮的值.