Checkbox change innerHTML and call function

Question

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.

document.getElementById is for ID, for name is document.getElementByName ... try document.getElementByName("all") = "Show or Hide" — CMedina
– CMedina, Commented Feb 18, 2016 at 20:05
...and inside an event handler, it's just $(this).html('Show') — adeneo
– adeneo, Commented Feb 18, 2016 at 20:05
@CMedina I;m calling document.getElementByid on on the label id — Johnk
– Johnk, Commented Feb 18, 2016 at 20:14
@adeneo I'm not accessing the element called by the event handler, so I can't use this — Johnk
– Johnk, Commented Feb 18, 2016 at 20:15

kantuni · Accepted Answer · 2017-03-24 00:46:31Z

1

You are changing the value of innerHTML and leaving only text there.

Solution: Put the text inside a span element

<label class="btn btn-info" id="all">
  <input type="checkbox" name="all">
  <span>Hide</span>
</label>

Then in JS do:

 $('input[name="all"]').on('change', function() {
  if ($(this).is(':checked')) {
    hideAll();
    $('#all span').text('Show');
  } else {
    showAll();
    $('#all span').text('Hide');
  }
});

edited Mar 24, 2017 at 0:46

answered Feb 18, 2016 at 20:15

kantuni

98111 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

meyer9 · Accepted Answer · 2016-02-18 20:07:41Z

0

Currently, you are selecting the label which selects this HTML element:

<label class="btn btn-info" id ="all">
  <input name="all" type="checkbox" >Hide
</label>

When you set the innerHTML, you get rid of the input. I'd split up the label and input like this:

<input name="all" type="checkbox">
<label class="btn btn-info" id="all">Hide</label>

answered Feb 18, 2016 at 20:07

meyer9

1,1409 silver badges26 bronze badges

Collectives™ on Stack Overflow

Checkbox change innerHTML and call function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related