checkbox.checked always returning true inside onclick function

Question

I cannoot figure out this seemingly simple problem. I have a checkbox and an onclick associated with it inside my JSP page. When i click the checkbox I need to check inside this onclick function whether it is checked or unchecked to know what action to take. However, it is always checked! I do not know why. Its almost like the click action completes and marks it checked before it gets to this function. However, if i do a simple HTML example page it works just fine and returns the correct value for .checked. I have tried removing "this" and just calling the checkbox by ID from onclick with the same results Here is the setup:

<label><input type="checkbox" onclick="selectEntireRange(this);"/> Select ALL Ranges</label>

Here is the JS:

function selectEntireRange(checkElement)
{
  // if checked - remove check and display table rows normally
  if(checkElement.checked)
  {
    //ALWAYS EXECUTES HERE!
    checkElement.checked = false;
    greyoutAllTableRows(false);
  }
  // if unchecked - mark 'checked' and grey out all table rows
  else
  {
    checkElement.checked = true;
    setAllCheckBoxes(false);
    var selectedRangeField = document.getElementById('effRange');
    selectedRangeField.value = '';
    greyoutAllTableRows(true);
  }
}

any help would be awesome! Thanks!

P.S. I cannot use jQuery for this!

Hi, yes, but with IE onchange only triggers when the checkbox loses focus, which is not what i want. — Igor Trivunic
– Igor Trivunic, Commented Nov 26, 2013 at 17:30
Try the first answer in this post, I think it will help. stackoverflow.com/questions/10459021/… — Susie
– Susie, Commented Nov 26, 2013 at 17:31
A workaround would be to have a hidden input element that contains 1 when checked and 0 when not. You just have to make sure it toggles every time selectEntireRange is called. — em_
– em_, Commented Nov 26, 2013 at 17:45
You know, i think i might just stick with this workaround for now! Thank you for the suggestion! — Igor Trivunic
– Igor Trivunic, Commented Nov 26, 2013 at 18:04

user3026911 · Accepted Answer · 2013-11-26 17:38:19Z

1

How about

onclick="selectEntireRange(this.checked)"

then change function to ask if its true or false or 0 or 1 or what ever the default check values are. not sure.

answered Nov 26, 2013 at 17:38

user3026911

519 bronze badges

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

1 Comment

Igor Trivunic Over a year ago

clever approach! Unfortunately, always checked as well :(

Nitesh Kumar Anand · Accepted Answer · 2013-11-26 17:46:08Z

0

The problem arises because of your setting of checkElement.checked = false; inside if/else block. Comment\Remove that line out and it will work. Since on click you are setting it back to false, the checkbox does not go into the checked status and every time user clicks on it,it gets unchecked because of checkElement.checked = false; line.

answered Nov 26, 2013 at 17:46

Nitesh Kumar Anand

6211 gold badge6 silver badges20 bronze badges

2 Comments

Igor Trivunic Over a year ago

But it is incorrectly reporting the status of "checked" even before that line. Anyways, i just ran it again with that line removed ... still wrong. Thanks for the suggestion!

Nitesh Kumar Anand Over a year ago

Let me know the browser and the version if you do not find it working on this jsfiddle.

Collectives™ on Stack Overflow

checkbox.checked always returning true inside onclick function

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related