如何在Twitter Bootstrap按钮组中获取所选按钮的值

Question

如果我在 Bootstrap 中有一个单选按钮组，就像以下代码所示：

<div class="btn-group" data-toggle="buttons-radio">
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
        <button class="btn">4</button>
</div>

如何获得/设置选中的值？

- Adham

Answer 1

为了设置活动元素，将 active 类添加到您想要选择的任何按钮上（并取消选择其他按钮）。

$('.btn-group > .btn').removeClass('active')    // Remove any existing active classes
$('.btn-group > .btn').eq(0).addClass('active') // Add the class to the nth element

要获取当前活动按钮的HTML/文本内容，可以尝试像这样做：

$('.btn-group > .btn.active').html()

- Tyler Johnson

---

实际上需要设置一个为活动状态并取消所有其他的活动状态。在我看来，这不是一个很好的界面。 - Josh Hansen

这是我想出的最终解决方案，用于获取所选元素，$('.btn-group > .btn.active input')[0]。 - sameera207

Answer 2

这里有另一种解决方案

 alert($('.btn-group > .btn.active').text());

- Shivek Parmar

Answer 3

var num = null;
var ele = document.querySelectorAll(".btn-group > button.btn");
for(var i=0; i<ele.length; i++){
    ele[i].addEventListener("click", function(){
        num = +this.innerHTML;
        alert("Value is " + num);
    });
}

或者使用jQuery：

var num = null;
$(".btn-group > button.btn").on("click", function(){
    num = +this.innerHTML;
    alert("Value is " + num);
});

- Derek 朕會功夫

---

谢谢，但是如何设置组的值？ - Adham

@Adham - this.innerHTML = value @Adham - this.innerHTML = value - Derek 朕會功夫