javascript - 获取 Twitter Bootstrap 单选按钮的值。查询

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

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

<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 类名。

您始终可以使用它来更改隐藏字段，但如果我想自己提交表单，我会继续做我的示例。