Get ID or value of a checkbox onclick of that checkbox in pure Javascript

jwarner112 picture jwarner112 · Dec 18, 2013 · Viewed 34.9k times · Source

I'm working on a script for my company that, upon clicking a checkbox:

  • Fires function OptionSelected()
  • Gets ID of that checkbox
  • Performs a bitwise operation based on that ID

Or, preferably:

  • Fires function OptionSelected()
  • Fetches the integer assigned to that checkbox (<input="checkbox" value="2", get 2)
  • Performs bitwise operation with that value.

To debug, I am having my code return to me an alert with the value inside. I've yet to write the bitwise operations portion.

Here is my js code:

function OptionsSelected(e)
{
    alert(e.target.id);
}

And the example checkbox it references:

<input type="checkbox" name="checkgrp" onclick="return OptionsSelected(e)" value="2" id="eXAMPLE"><LABEL id="LeXAMPLE"></LABEL>

When I click the box in runtime, I get this javascript error message:

enter image description here

Does anyone have a fix for this? I suppose it's rather simple, so in addition to supplying your fix, would you explain why your fix works?

Bonus points if your solution saves me time by directly pulling the bitwise value in place of the actual ID.

Note: I can't employ the GetElementByID method because I'll be fetching the ID or value, not using it to perform an action.

Thanks, everyone!

Answer

Tom Pietrosanti picture Tom Pietrosanti · Dec 18, 2013

When you call the script using the onclick attribute, you are calling the function yourself. So in this case, you're passing a variable called e which you've never defined.

Instead, you could pass a reference to the checkbox that you clicked:

<input type="checkbox" name="checkgrp" onclick="return OptionsSelected(this)" value="2" id="eXAMPLE"><LABEL id="LeXAMPLE"></LABEL>

And in OptionsSelected you would do this:

function OptionsSelected(me)
{
    alert(me.id);
}