How to change checkbox label text when toggling check on bootstrap styled button group

Issue

I'm trying to change the label text for a bootstrap styled button group checkbox, but once changed, it isn't possible to change the text again. (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");
    }
});

Note - I'm unsure if it matters if you use change or click event and that I'm only doing the green button as an example.

Solution

Here is my solution for your problem:

I added a span for the text content like:

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

Then i altert you jquery to:

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

This provides a dynamic way to change the text and you dont have to care about ID's

Full Sample

Answered By - Steven Web