Get attr('id') from a <td> using jQuery

Question

Hello,

I have the following code, and the checkb starts from checkb01 to chekb342.

<tr>
     <td class="specs_under">Specs</td>
     <td id="checkb77" class='checkb'><input type="checkbox" id="add_remove77" class="change_image77"/></td>
     <td  class="specs_under_value" id="specs_unit77">1</td>
     <td rowspan="13" class="specs_under_value" id="specs_itempr77">15</td>
     <td class="specs_under_value" id="specs_quantity77">&nbsp;</td>
     <td class="specs_under_value" id="specs_packageprice77">0.125</td>
</tr>

I tried using this code

$(document).ready(function(){
    $(".checkb").toggle(function() {
        var cid = $(this).attr('id');
        alert('id');

    },function() {
        alert('checkbox unchekced');

    }

How do I get the value of the id in <td> respective checkbox clicks using jquery

Thanks Jean

Guys I need to get the value of id when the checkbox is clicked, not the checkbox id

Answer 1

$(':checkbox').toggle(function() {
    var cid = $(this).attr('id');
    alert(cid);
}, function() {
    alert('checkbox unchekced');
}​);​

Answer 2

You can obtain the values by either attaching the event handlers directly onto the checkbox (toggle() automatically cancels the default checking action, so we're using change() here):

$('.checkb :checkbox').change(function(){
    if(this.checked){
        // Do somethin'
        alert(this.id);
    } else {
        // Do something else
        alert('Unchecked!');
    }
});

If you really want to use toggle, this code works, somewhat:

$(".checkb").toggle(function() {
    var cid = $(this).children(':checkbox').attr('id');
    alert(cid);
}, function() {
    alert('checkbox unchekced');
});

However, because of the above mentioned default action cancellation, the checkbox can never be checked.

Answer 3

Simplest way I can think of right now is adding a rel attribute to the input tag and an id to the tr tag like:

<tr id="row77">
     <td class="specs_under">Specs</td>
     <td id="checkb77" class='checkb'><input type="checkbox" id="add_remove77" class="change_image77" rel="row77"/></td>
     <td  class="specs_under_value" id="specs_unit77">1</td>
     <td rowspan="13" class="specs_under_value" id="specs_itempr77">15</td>
     <td class="specs_under_value" id="specs_quantity77">&nbsp;</td>
     <td class="specs_under_value" id="specs_packageprice77">0.125</td>
</tr>

and then use:

<script type="text/javascript">
     $('checkbox:checked').each(function() {
         var id = $(this).attr('rel').substr(3,$(this).attr('rel').length); // 77
         var specs_packageprice = $('#'+$(this).attr('rel')+' #specs_packageprice'+id).html(); //0.125
         // More code...
     }
</script>

I also think you can simplify this alot...

Answer 4

If you are using jquery 1.4.2 (the newest version, I think), I'd consider using delegate(). Something like this:

$(function() {
  $("table").delegate(":checkbox", "click", function() {alert($(this).attr("id");})
})

Obviously, you can do whatever you want in your click handler.

What delegate does is attach to the table containing all your checkboxes. Anytime an input element in the table is clicked, the handler will fire. If you have other inputs in the table, you'll need to check to be sure you have an element you want. You could check if type is checkbox. I'd recommend giving your table an id, and replacing "table" with the id in the above.

Alternatively, you can attach a click handler to every input in the table, but that's probably not going to be easier, and will likely be slower.

Finally, if you're not using 1.4.2, but are using at least 1.3, you can use live() instead of delegate.

Answer 5

If you are trying to get the id of the enclosing td (not the checkbox itself) consider using the .closest() function.

ex:

$(':checkbox').change(function(){
    var id = $(this).closest('td').attr('id');
    alert(id + ' : ' + this.checked);
});