Checkbox change innerHTML and call function

I have a group of checkboxes:

<form class="form">
                <div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
                    <label class="btn btn-info" id ="all">
                        <input name="all" type="checkbox" >Hide
                    </label>
                    <label class="btn btn-info">
                        <input name="total" id="total" type="checkbox">Total
                    </label>
                    <label class="btn btn-info">
                        <input name="max" id="max" type="checkbox">Max
                    </label>
                    <label class="btn btn-info">
                        <input name="mean" id="mean" type="checkbox">Mean
                    </label>
                    <label class="btn btn-info">
                        <input name="min" id="min" type="checkbox">Min
                    </label>
                    <label class="btn btn-info">
                        <input name="extrapo" id="extrapolation" type="radio">Extrapo
                    </label>
                </div>
            </form>

I'm trying to call two functions depending on whether the button is checked or not and also change the text on the label.

My JS attempt:

<script type="text/javascript">

$('[name=all]').change(function () {
    if ($(this).is(':checked')) {
        hideAll();
        document.getElementById("all").innerHTML = "Show";
    }
    else {
        showAll();
        document.getElementById("all").innerHTML = "Hide";
    }
});

</script>

I can call each function no problem on check and unchecked, but when I change the innerHTML the check button stops working.