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

Posted 2023-03-05

【中文标题】如何获取 twitter bootstrap 按钮组中选定按钮的值

【英文标题】：How to get the value of selected button in twitter bootstrap button group

【发布时间】：2012-06-12 02:03:18

【问题描述】：

如果我在引导程序中有一个单选按钮组，如下所示：

<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选定的值？

【参考方案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()

【讨论】：

它实际上需要在一个上设置为活动，在所有其他上取消活动。 IMO 界面不是很好。

这是我想出的获得选定元素的最终解决方案，$('.btn-group > .btn.active input')[0]

【参考方案2】：

这里还有一个解决方案

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

【参考方案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);
);

【讨论】：

谢谢，但是如何设置组的值

@Adham - this.innerHTML = value