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 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 :)
Share Improve this question asked May 27, 2015 at 16:29 SamAkoSamAko 3,6157 gold badges46 silver badges80 bronze badges 3- 2 I may be wrong, but I don't think that programatically changing a checkbox fires it's change event. – Jesse Kernaghan Commented May 27, 2015 at 16:33
- 2 You have to fire the event manually. See stackoverflow./questions/2856513/… – 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 Commented May 27, 2015 at 16:35
2 Answers
Reset to default 8You 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');
});
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)
}
});
});