Getting value of HTML Checkbox from onclick/onchange events

Question

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

From within onClickHandler and/or onChangeHandler, how can I determine what is the new state of the checkbox?

Solution 1

The short answer:

Use the click event, which won't fire until after the value has been updated, and fires when you want it to:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

Live example | Source

The longer answer:

The change event handler isn't called until the checked state has been updated (live example | source), but because (as Tim Büthe points out in the comments) IE doesn't fire the change event until the checkbox loses focus, you don't get the notification proactively. Worse, with IE if you click a label for the checkbox (rather than the checkbox itself) to update it, you can get the impression that you're getting the old value (try it with IE here by clicking the label: live example | source). This is because if the checkbox has focus, clicking the label takes the focus away from it, firing the change event with the old value, and then the click happens setting the new value and setting focus back on the checkbox. Very confusing.

But you can avoid all of that unpleasantness if you use click instead.

I've used DOM0 handlers (onxyz attributes) because that's what you asked about, but for the record, I would generally recommend hooking up handlers in code (DOM2's addEventListener, or attachEvent in older versions of IE) rather than using onxyz attributes. That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions.

---

An earlier version of this answer used this code for handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

The goal seemed to be to allow the click to complete before looking at the value. As far as I'm aware, there's no reason to do that, and I have no idea why I did. The value is changed before the click handler is called. In fact, the spec is quite clear about that. The version without setTimeout works perfectly well in every browser I've tried (even IE6). I can only assume I was thinking about some other platform where the change isn't done until after the event. In any case, no reason to do that with HTML checkboxes.

Solution 2

For React.js, you can do this with more readable code. Hope it helps.

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}

Solution 3

Use this

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>

Solution 4

use onclick event on all checkboxes that you want to get their values whether they are checked or not.

<input type="checkbox" value="rightSideCheckbox" onclick='handleClick(this);'>

function handleClick(checkbox) {
    if(checkbox.checked){
        console.log(checkbox.value+"True")
    }
    else{
        console.log(checkbox.value+"False")
    }
}

View more solutions

Comments

[Mori]

Fortunately onchange works correctly in +IE9. Source

[dah97765]

Adding my 2 cents here: It seems that IE8 (and below, I assume), differentiates between a click down and a click release... and that the reason we're on this page is because it fires on click down instead of click release. Seems like checkboxes only activate on a click release - clicking down and then moving the mouse would register a click, but not modify a checkbox.

[Nate Whittaker]

Looks like toggling the checkbox via keyboard navigation (tab+space) will also trigger the onclick handler (verified in Chrome 51, at least).

[user7350714]

How to get the value of that checkbox on click of it??

[Mark Willow Aldave]

can you help me with this: stackoverflow.com/questions/68386737/… I guess this is what I need but dont know how to do it properly.

[Pakpoom Tiwakornkit]

@MarkWillowAldave sorry I don't use Next.js

[Per Lindberg]

.value always gives 'on', use .checked which gives 'true' or 'false'.