如何获取twitter bootstrap按钮组中所选按钮的值

时间:2012-06-08 00:17:24

标签: javascript radio-button twitter-bootstrap buttongroup

如果我在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>

我如何get / set所选的值?

3 个答案:

答案 0 :(得分:15)

要设置活动元素,请将类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()

答案 1 :(得分:14)

这是另一个解决方案

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

答案 2 :(得分:11)

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);
});