[RESOLVED]To select the radio button when the Table row is clicked

Hi members,

I have one HTML table, in each row first column is the radio button.

Requirement:

If the user clicks on the html table row, then the radio button should get checked/selected

My effort:

I have tried with the following JQuery Code. But it doesn’t work as expected. Please check the following code

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

        $('tr').click(function () {
            alert('Table row clicked');
            $('input[type=radio]', this).attr('checked', 'checked');
        }
 );

your code will select the radio button on click of the corresponding row. Works..!!!!

if you select the other row all other radio buttons should deselect or what you are expecting?

Lokesh B R

your code will select the radio button on click of the corresponding row. Works..!!!!

if you select the other row all other radio buttons should deselect or what you are expecting?

Thanks for your response. My issue is, while using this code if i select any row on a particular table, only the last row
radio button got selected.

And i checked with alert button, the result is "alert button continuously appears for several times".

I had the set radio button with group name, since i need only row to be selected in a table (at a time). 

check is this works for you and am using this version of jquery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$(‘tr’).click(function (event) {
           
                if (!$(‘input[type=radio]‘, this).prop(‘checked’))
                    $(‘input[type=radio]‘, this).prop(‘checked’, true);
                else
                    $(‘input[type=radio]‘, this).prop(‘checked’, false);
            });

Hi nagarajasia,

Thanks for your post.

nagarajasia

Requirement:

If the user clicks on the html table row, then the radio button should get checked/selected

As for your problem, you could refer to the following sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(function () {
            $("tr").click(function () {
                alert('Table row clicked');
                $(this).children().find(":radio").attr('checked', 'checked');
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>
                        <input id="Radio1" type="radio" />

                    </td>
                    <td>Row1</td>
                </tr>
                <tr>
                    <td>
                        <input id="Radio2" type="radio" />

                    </td>
                    <td>Row2</td>
                </tr>
                <tr>
                    <td>
                        <input id="Radio3" type="radio" />

                    </td>
                    <td>Row3</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html> 

If you have any question about my reply, please let me know freely.

Best Regards,

Fei Han

Leave a Reply