get ID of clicked control

Question

Using jQuery I'm trying to get the id of control, which I clicked (radiobutton). I read this question and tried almost everything from there:

alert($(this).get(0).id);
alert($(this).id);
alert($(this).attr('id'));
alert(this.id);

But I'm always getting: Undefined

I just don't understand what I'm doing wrong.

UPDATED:

Radiobuttons is generated dynamically in code behind by C#:

controlToReturn = new RadioButton
                    {
                        ID = controlId
                    };
                    ((RadioButton)controlToReturn).Text = text;
                    ((RadioButton)controlToReturn).Checked = Convert.ToBoolean(Convert.ToInt32(value));
                    ((RadioButton)controlToReturn).GroupName = groupName;
                    ((RadioButton)controlToReturn).CssClass = cssClass;
                    ((RadioButton)controlToReturn).Attributes.Add("runat", "server");
                    ((RadioButton)controlToReturn).Attributes.Add("onclick", "Show();");

and function in ASPX:

<script type="text/javascript" language="javascript">
function Show() {

             if ($(this).cheked = true) {

                 console.log(this);
                 alert($(this).get(0).id);
                 alert($(this).id);
                 alert($(this).attr('id'));
                 alert(this.id);               
             }        
         }
     </script>

I know radiobutton has id, I checked generated HTML.

Can you post the rest of your code? `this.id` and `$(this).attr('id')` should work, so there's a problem somewhere else in your code. HTML too please. — ahren, Nov 22 '12 at 20:01
Does the element have an id attribute? That code needs to be inside a click event handler by the way. Here is an demonstration of what you are trying to do http://jsfiddle.net/gtaKc/1/ — Asad Saeeduddin, Nov 22 '12 at 20:01
What happens if you `alert(this)`? Or, better, `console.log(this)`? — David Thomas, Nov 22 '12 at 20:04
Of course it's inside click event handler. --- Big edit, couldn't answer faster. — Alexan, Nov 22 '12 at 20:22

score 3 · Answer 1 · answered Nov 22 '12 at 20:24

Your problem is this has no context within your function and is in fact the window itself.

You would need to modify both the output html to provide context as an argument:

 ((RadioButton)controlToReturn).Attributes.Add("onclick", "Show(this);");

and change the function Show:

function Show(el) {
    /* for jQuery use $(el) */
    if(el.checked) {
        alert(el.id);
    }
}

score 2 · Accepted Answer · answered Nov 22 '12 at 20:20

2

C#:

((RadioButton)controlToReturn).Attributes.Add("onclick", "Show(this);");

JavaScript:

function Show(radio) {
    if (radio.checked) {
        alert(radio.id);               
    }        
}

answered Nov 22 '12 at 20:20

VisioN

143,310
32
282
281

okay, it works this way. I just thought that I can get current control using 'this'. – Alexan Nov 22 '12 at 20:33
1

@Alex Yes, you can do it. Set in C# the following: `.Add("onclick", "Show");` and in JavaScript: `function Show() { if (this.checked) alert(this.id); }`. – VisioN Nov 22 '12 at 20:36
Actually I did this if ($(this).cheked = true) {alert(this.id);};, it didn't work. – Alexan Nov 22 '12 at 20:41
1

@Alex Pay attention that in JavaScript the *equals to* comparison is `==` or `===` (strict). Moreover, `$(this).cheked` is invalid, since there is no `cheked` property in jQuery object. Use either `this.checked` or `$(this).prop("checked")`. – VisioN Nov 22 '12 at 20:44
yes, you're right it was cheked, not checked, so it was not correct. – Alexan Nov 22 '12 at 20:57

score 1 · Answer 3 · answered Nov 22 '12 at 20:05

1

To attach a click-listener and alert the ID, your code would look something like this:

$(function () {
    $("input[type='radio']").on("click", function () {
        alert(this.id);            
    });
});

A working demo: http://jsfiddle.net/SSBnV/1/

answered Nov 22 '12 at 20:05

Christofer Eliasson

32,939
7
74
103

3

`$(this).prop("id")` does the same as `this.id` but slower. – VisioN Nov 22 '12 at 20:06
@Vision I did question you initially, but it seems you're right :). Here's a jsPerf (although it uses `attr`) http://jsperf.com/el-attr-id-vs-el-id/19 – Mathew Thompson Nov 22 '12 at 20:10
@mattytommo There is no need in jsperf here to understand it :) Creating jQuery object out of DOM element and executing its method worth much more than getting DOM object property. – VisioN Nov 22 '12 at 20:12
@VisioN Agreed, but it only takes one mis-informed person to question your logic :) – Mathew Thompson Nov 22 '12 at 22:01

get ID of clicked control

3 Answers3