How to get the id value of a check box?

Question

have a table that dynamically generates text boxes in run time. I want to delete the row that got checked. The table is connected with DB.

And, the check box ID's were appended by the TABLE DATA's ID. If, check any box, and click delete means, It have to get deleted. I have the back end codes.

I just want to get the ID value of any check box thats get selected, because it holds the row ID along with its own ID.

The dynamically generated Check box code looks like this.

x+= "<td>" + "<input id='cid"+id + "'type=checkbox />"

Any suggestions would be appreciative. I am using JavaScript here. Jquery notations also useful for me. Thanks

Any conceptual idea about selecting more that 1 row and deleting will be more appreciative.

Again Thanks.

Answer 1

To get the ID of the checkbox:

$('td input[type=checkbox]').click(function(){
    var id = $('td input').attr('id');
});

To select more than one row and then delete the values, you could do something like this:

$('form').submit(function(){
    $('td input:checked').each(function(){
        deleteFromDatabase($(this).attr('id'));
    });
});

With this code you would select all the rows you wanted to delete and then submit the form. The JS would then go through each selected row and call the deleteFromDatabase Ajax call to delete it from the database.

Answer 2

I want to delete the row that got checked

// selector may need to be refined, depending on its precise location in the DOM
$(":checkbox").click(function() {
    if(this.checked) $(this).closest("tr").remove();
});

Answer 3

To get the id's of all checked checkboxes you can use this:

$('input[type=checkbox]:checked').attr('id');

Answer 4

EDIT: I re-read your question... again. I think I had it wrong before. Sounds like the delete button is outside the table, and when you click it, you want to delete the rows where the checkbox is checked.

Does that sound like what you want?

$('#deleteButton').click(function() {
      var $checked = $('#theTable :checkbox[id^=cid]:checked');
      $checked.closest('tr').each(function( i ) {
          var theID = $checked.eq( i ).attr('id'); // get the ID
          $(this).remove();
      });
});

• .closest() will get the nearest ancestor <tr>
• .each() iterate over the <tr> elements
• .remove() will remove the row.

You didn't provide any HTML, so I'm not sure exactly how the selector should look.