jquery - 在 Bootstrap 样式按钮组上切换检查时如何更改复选框标签文本

Question

我正在尝试更改 bootstrap styled button group checkbox 的标签文本, 但一旦更改，就无法再次更改文本。 ( JSFiddle )

HTML:

<div class="btn-group form-group pull-right" data-toggle="buttons">
    <label id="lblfilter-green" for="filter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green"/>
        On
    </label>
</div>

Javascript:

$('#lblfilter-green').on('click', function (e) {
    var value = $('#filter-green').is(':checked');                

    if (value) {    
        $('#lblfilter-green').text("Off");
    } else {
        $('#lblfilter-green').text("On");
    }
});

注意 - 我不确定您使用更改或点击事件是否重要，我只是以绿色按钮为例。

Answer 1

这是我针对你的问题的解决方案:

我为文本内容添加了一个跨度，例如:

    <label id="lblfilter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green" /><span>Off</span>
    </label>

然后我将 jquery 更改为:

    $('label').click(function () {
        var checked = $('input', this).is(':checked');
        $('span', this).text(checked ? 'Off' : 'On');
    });

这提供了一种更改文本的动态方式，您不必关心 ID

Full Sample