CODEWITHSUNDEEP
javascriptjqueryhtml
Headshot
Headshot

Reputation: 452

How to get value radio on table using click event?

I want to get value of radio in table using click event.Note , get value of radio in column

<table id="div_table" width="500px" border="2px" cellpadding="2" cellspacing="2" >
<tr>
<td >Column Name1</td>
<td>Column Name2</td>
<td >Column Name3</td>
</tr>

<tr >
<td >PN1</td>
<td ><input type="radio" name="RD_CHECK" value="ABC">ABC</td>
<td ></td>
</tr>

<tr >
<td >PX2</td>
<td ><input type="radio" name="RD_CHECK" value="XYZ">XYZ <input type="radio" name="RD_CHECK" value="CBA">CBA</td>
<td ><input type="radio" name="RD_CHECK" value="123">123 <input type="radio" name="RD_CHECK" value="456">456</td>
</tr>
</table>

Ok , Example: I check radio of column2 but it not work.

 $(document).ready(function ()
        {
            $('body').on('click','#div_table tbody tr', function ()
            {
                if ($("input[type='radio']").is(':checked') == true && $(this).find('td:eq')==1)
                {
                    //value of radio in Column2
                    alert('This is Column 2 and value = '+$("input:checked").val());
                }
                else
                {
                  // value of radio in Column3
                    alert('This is Column 3 and value = '+$("input:checked").val());
                }
            });
   });

Give me advised.Thank guys.

Upvotes: 0

Views: 386

Answers (1)

George
George

Reputation: 36784

  • $("input[type='radio']").is(':checked') == true Will get the checked property of only the first matching <input>. If your first radio isn't checked, this fails.
  • $(this).find('td:eq') == 1 Will always be true since even a jQuery constructor with no matches returns an object (truthy value).

Instead, attach the event to the radio buttons themselves. You can get the column by finding the .index() of the .closest() <td>. To get the value simply use the context of your event:

$(document).ready(function () {
    $('body').on('click', '#div_table  tr :radio', function () {
        var col = $(this).closest('td').index();
        alert('This is Column ' + col + ' and value = ' + this.value);
    });
});

JSFiddle

Upvotes: 1

Related Questions