How can i get a checked Checkbox title value in javascript/jquery?

Question

I want to get chekbox title value. How can i do that ?

<asp:CheckBox ID="chkSingle" runat="server" onclick="Checked(this);" title='<%#Eval("CarServiceFormInvoiceRecordID") %>' />

My func doesn't work..

function Checked(cb) {
            if (cb.checked) {
                alert(cb.title);
...

Maybe <asp:Checkbox /> will change the title attribute to <label /> tag. — user1823761
– user1823761, Commented May 26, 2013 at 15:35

Sri Tirupathi Raju · Accepted Answer · 2013-05-26 15:37:01Z

2

use this

$('#chkSingle').attr('title')

to ensure that checkbox is checked

$('#chkSingle[type="checkbox"]').filter(function(){return $(this).is(':checked')}).attr('tile')

edited May 26, 2013 at 15:37

answered May 26, 2013 at 15:27

Sri Tirupathi Raju

8395 silver badges14 bronze badges

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

2 Comments

A. Wolff Over a year ago

How is this different from OP using cb.title? BTW, using property title is still better

user1823761 Over a year ago

The ID attribute inside ASP Web Controls, isn't exactly what you get in your HTML output, so your selector ($('#chkSingle')) will always return an empty matched set.

score 1 · Accepted Answer · 2013-05-27 07:13:43Z

1

Based on these comments:

[NOX] - Can you show us the GENERATED code of your ?
[Ahmet] - <input id="chkSingle" type="checkbox" name="ctl00$c1$RadGrid1$ctl00$ctl04$chkSingle" onclick="Checked(this);">

The title attribute is not generated in the output. Why? I don't know really. Let's check it step by step.

First, change your checkbox to this one:

<asp:CheckBox ID="chkSingle" runat="server" onclick="Checked(this);" title='HELLO' />

As you see, I changed the value of title attribute. Check the output, if you haven't any title attribute, try to change it to something like data-title:

<asp:CheckBox ID="chkSingle" runat="server" onclick="Checked(this);" data-title='HELLO' />

Now check your generated code, it must be something like this (I hope so):

<input id="chkSingle" type="checkbox" name="ctl00$c1$RadGrid1$ctl00$ctl04$chkSingle" onclick="Checked(this);" data-title="Hello">

If in generated code, the attribute data-title is exists, then you succeed. Now you must change your function to get this attribute:

alert(cb.getAttribute('data-title'));

UPDATE

As you comment, the generated code is:

<span data-title="HELLO"><input id="ctl00_c1_RadGrid1_ctl00_ctl04_chkSingle" type="checkbox" name="ctl00$c1$RadGrid1$ctl00$ctl04$chkSingle" onclick="Checked(this);" /></span>

So, the attribute you attach to the <asp:Checkbox /> became to an span tag. So you must change your function to something like this:

function Checked(cb) {
    var $input = $(cb);
    var $span = $input.closest('span');
    var title = $span.attr('data-title');

    if ($input.is(':checked')) {
        alert(title);
    }
}

Check the Working jsFiddle Demo.
I think you can put back data-title to title attribute again.

edited May 27, 2013 at 7:13

answered May 27, 2013 at 2:23

user1823761

3 Comments

Erdogan Over a year ago

Thank you ! But i can't get the data-title value because generated code is <span data-title="HELLO"><input id="ctl00_c1_RadGrid1_ctl00_ctl04_chkSingle" type="checkbox" name="ctl00$c1$RadGrid1$ctl00$ctl04$chkSingle" onclick="Checked(this);" /></span> How can i get span value ?

user1823761 Over a year ago

@Ahmet Thanks you can use jQuery in your project, check this jsFiddle.

Erdogan Over a year ago

You are King.. Thank you so much

Ted · Accepted Answer · 2013-05-26 15:50:18Z

1

jQuery:

if ($(this).is(':checked')) {
  alert($(this).attr('title'));
}

Javascript:

change you call from Checked(this); to Checked(this.id);

and you function to:

function Checked(checkId) {
  var checkbox = document.getElementById(checkId);
  if(checkbox.checked) {
    alert(checkId);
    ....

Sorry, getting caught up with some of the comments here, I oversaw your actual problem. You need to have a look at the markup generated and see how the label for the checkbox is generated. Paste it here and I'll tell you how to access the value.

edited May 26, 2013 at 15:50

answered May 26, 2013 at 15:32

Ted

4,0671 gold badge23 silver badges35 bronze badges

6 Comments

A. Wolff Over a year ago

No, why use jquery when js expose natively properties?

Ted Over a year ago

@roasted - I assumed he wanted a jquery solution due to the jquery tag.

A. Wolff Over a year ago

I see a javascript tag too. BTW, why making code slower using jquery when you can access direct property using js?

Ted Over a year ago

@roasted - added a javascript solution, too. hope you're happy now

A. Wolff Over a year ago

i don't think the problem come from here, i think OP is doing something wrong somewhere else. But ya, i'm happy when not seeing useless jquery code :) {i don't mean your previous answer was useless}

|

sAnS · Accepted Answer · 2013-05-26 15:30:05Z

0

you may try like this

function Checked(cb) {
            if (cb.checked) {
                alert(cb.getAttribute('title'));
   }
}

answered May 26, 2013 at 15:30

sAnS

1,1631 gold badge8 silver badges10 bronze badges

1 Comment

A. Wolff Over a year ago

How is this different from OP using cb.title?

anilam · Accepted Answer · 2019-12-27 12:42:41Z

0

you may try like that ::

$(':checked').prop('title', function(k) {
        tit[k]= $(this).attr('title');
    });

answered Dec 27, 2019 at 12:42

anilam

93211 silver badges7 bronze badges

Collectives™ on Stack Overflow

How can i get a checked Checkbox title value in javascript/jquery?

5 Answers 5

2 Comments

UPDATE

3 Comments

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

UPDATE

3 Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related