53

我有一個Twitter Bootstrap按鈕收音機並掛鉤onclick事件。但是,如何檢查觸發了哪些按鈕?Twitter上的Bootstrap onclick事件按鈕收音機

我的第一個想法是簡單地檢查'active'類,但是這應該創建一個競爭條件(結果取決於Twitter Bootstrap事件還是我自己的onclick事件首先被處理)。

回答

61

這是一個非常惱人的問題。我最終使用的是:

首先,創建一組沒有data-toggle屬性的簡單按鈕。

<div id="selector" class="btn-group"> 
    <button type="button" class="btn active">Day</button> 
    <button type="button" class="btn">Week</button> 
    <button type="button" class="btn">Month</button> 
    <button type="button" class="btn">Year</button> 
</div> 

接着,編寫事件處理程序,模擬由「活化」點擊的一個和「去激活」所有其他按鈕的單選按鈕的效果。 (編輯:從意見綜合Nick的清潔版)

$('#selector button').click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 

    // TODO: insert whatever you want to do with $(this) here 
}); 
+24

稍微簡明和優化(無雙呼叫到選擇器)版本:$(這).addClass(「激活」)的兄弟姐妹()removeClass(「激活」); – Nick 2014-02-16 02:14:44

+0

這不適用於單選按鈕。如何指定哪個是哪個,如果每個單選按鈕做不同的事情 – 2014-08-09 02:54:01

+0

@MurhafSousli我不知道我理解你的問題。如果你在代碼中插入'// TODO',你應該可以像'$(this)'一樣訪問新選擇的單選按鈕。 – 2014-08-09 09:18:21

19

我會用一個改變事件不是一個點擊這樣的:

$('input[name="name-of-radio-group"]').change(function() { 
    alert($(this).val()) 
}) 
+5

想過這個問題,但根據W3Schools的(http://www.w3schools.com/jsref/event_onchange.asp)onchange事件僅由