BootStrap 3.X单选按钮组-获取当前所选按钮的OnClick触发器方法

Question

我有一个这样的按钮组：

<div id="matchMode" class="btn-group" data-toggle="buttons">
    <label class="btn btn-default center-block">
        <input type="radio" name="matchMode" value="0">All
    </label>
    <label class="btn btn-default active center-block">
        <input type="radio" name="matchMode" value="1">Filtered
    </label>
</div>

我需要这些按钮是可点击的，这样我就可以在点击后触发一些代码来刷新数据网格。我尝试过以下几种：

$(function () {
    $("#matchMode .btn").click(function() {
        RefreshDataGrid();
    })
});

似乎有效，但RefreshDataGrid()看起来是这样的：

function RefreshDataGrid() {
    var mode = $('#matchMode > .btn.active :radio').val();
    //some code that uses the var mode to refresh a data grid.
}

我想了解的是，事件处理程序似乎发生在DOM中按钮之间active类的Bootstrap更改之前。这导致我的选择不正确，我必须至少点击两次按钮才能在数据网格中获得正确的数据。

解决这个问题的正确方法是什么？我觉得它应该更简单，而且我把它弄得很复杂。如有任何帮助，我们将不胜感激。

Answer 1

试试这个：

你快到目标了！

 $(function () {
            $("#matchMode .btn").click(function () {
                RefreshDataGrid(this);
            })
        });
        function RefreshDataGrid(data) {
            var mode = data.lastElementChild.value;
            //some code that uses the var mode to refresh a data grid.
        }

演示

Answer 2

为什么不将事件附加到change，并通过checked:检查所选元素

$(function () {
    function RefreshDataGrid() {
        var mode = $('#matchMode input:checked').val();
        alert(mode);
    }
    $("#matchMode input:radio").change(function() {
        RefreshDataGrid();
    });
});

jsFiddle演示。