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

Question

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:

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 1

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);
}

Answer 2

Variable e is not defined when you are calling your function OptionsSelected. To resolve that you can either go with Tom's solution.

or

Looking at your attached error message, i guess that you tested your code on IE. Just for your reference, 'target' property is not supported by IE,they use srcElement. so you could do something like this :

In html,

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

In javascript,

function OptionsSelected(e)
{
   alert((e.target || e.srcElement).value);
}

so that it will work on all the browsers.