web-dev-qa-db-ja.com

Twitterで選択したボタンの値を取得する方法bootstrapボタングループ

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するにはどうすればよいですか？

javascriptradio-buttontwitter-bootstrapbuttongroup
14
Adham
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);
});
11
Derek 朕會功夫

アクティブな要素を設定するには、選択するボタンにクラス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/textコンテンツを取得するには、次のようにしてみてください。

$('.btn-group > .btn.active').html()
16
Tyler Johnson

ここにもう1つの解決策があります

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