最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Get ID or value of a checkbox onclick of that checkbox in pure Javascript - Stack Overflow

programmeradmin5浏览0评论

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!

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!

Share Improve this question asked Dec 18, 2013 at 15:47 jwarner112jwarner112 1,5022 gold badges16 silver badges29 bronze badges 1
  • 1 replace e with this. So it will be: onclick="return OptionsSelected(this)" and alert(e.target.id) with alert(e.id). That should work – Michel Commented Dec 18, 2013 at 15:50
Add a comment  | 

2 Answers 2

Reset to default 13

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

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.

发布评论

评论列表(0)

  1. 暂无评论