Checkbox onchange event not firing

Question

I have the following setup: 2 checkboxes such that when the first is checked, it toggles the state of the second one. The second one has an onchange listener which is supposed to trigger an alert when it changes.

Problem is, when I click on it, the onchange is fired alright, but when I use the first to change it's state, the event isn't fired.

I'm I missing something? or is the onchange event basically meant to act like an onclick?

<!DOCTYPE html>
<html>
<body>

  <form action="">
    <input id='one' type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input id='two' type="checkbox" name="vehicle" value="Car" checked>I have a car 
  </form>
  <script>
    function show(){
      alert(document.getElementById('two').checked);
    }

    document.getElementById('one').addEventListener('click', function(){
      var two = document.getElementById('two');
      two.checked = ! two.checked;
    });

    document.getElementById('two').addEventListener('change', function(){
      alert("changed");
    });
  </script>

</body>
</html>

Thanks for helping :)

I may be wrong, but I don't think that programatically changing a checkbox fires it's change event. — Jesse Kernaghan
– Jesse Kernaghan, Commented May 27, 2015 at 16:33
You have to fire the event manually. See stackoverflow.com/questions/2856513/… — AmmarCSE
– AmmarCSE, Commented May 27, 2015 at 16:33
My real setup isn't like this, I'm working with a library called switchery that gives stylish checkboxes. The library hides the actual checkbox and creates the styled one. but the actual checkboxes state still updates to reflect that of the styled one. So I want to listen for change events and update angualr scope variables as needed. — SamAko
– SamAko, Commented May 27, 2015 at 16:35

taxicala · Accepted Answer · 2015-05-27 16:33:44Z

8

You are changing an attribute, that will not make the event fire, you can either trigger the change event, or instead click the second checkbox.

Try changing:

document.getElementById('one').addEventListener('click', function(){
  var two = document.getElementById('two');
  two.checked = ! two.checked;
});

To:

document.getElementById('one').addEventListener('click', function(){
  document.getElementById('two').click()
});

Another solution would be triggering the change event:

document.getElementById('one').addEventListener('click', function(){
  var two = document.getElementById('two');
  two.checked = ! two.checked;
  two.dispatchEvent('change');
});

answered May 27, 2015 at 16:33

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

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

2 Comments

Kevin Farrugia Over a year ago

Small correction on the second solution (according to MDN): two.dispatchEvent(new Event('change'));

Jose_X Over a year ago

stackoverflow.com/a/10159237/658035 references a microsoft webpage saying the following "The onchange event does not fire when the selected option of the select object is changed programmatically." I haven't come across a statement like that elsewhere, but it appears to be true in several browsers and was stated at the beginning of this answer.

Ted · Accepted Answer · 2015-05-27 16:35:02Z

0

If the goal is to have only one checkbox checked, here is a jQuery solution:

$(document).ready(function () {

    $('#one, #two').change(function (e) {
        if ($(this).prop('checked')) {
            $('#one, #two').not(this).prop('checked', false)
        }
    });

});

answered May 27, 2015 at 16:35

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

Checkbox onchange event not firing

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related