[RESOLVED]Implementation of group checkbox in HTML table

Dear Members,

May be my requirement seems to a simple one, since i am new to JQuery i need help on the following,

  • I have three html tables, lets say html_table1, html_table2
    and html_table3. 
  • The first column of the each table has "check box" . 

My requirement:

  • My requirement is that, user should be allowed to select only one row of the each html table.  Please give any idea/ link to implement my requirement.

 Thanks,

Nagaraj.S

 

Hi nagarajasia,

For your issue ,I wrote a demo for you,

when click a table row ,it will check the checkbox,and add red color for your selected row .

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        tr.selected {
        background-color:red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function() {
            $('table tr').click(function (event) {   
                $("tr").removeClass("selected");
                $(":checkbox").each(function () {
                    $(this).attr("checked", false);
                })
                $(this).addClass("selected");
                    if (event.target.type !== 'checkbox') {
                    $(':checkbox', this).trigger('click');
                }
            });
        });
    </script>
    <style type="text/css">
     
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td class="cb"><input type="checkbox" value="yes" /></td>
                <td>row 1</td>
            </tr>
            <tr>
                <td class="cb"><input type="checkbox" value="yes"/></td>
                <td>row 2</td>
            </tr>
            <tr>
                <td class="cb"><input type="checkbox" value="yes" /></td>
                <td>row 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Best Regards,

Kevin Shen.

@Kevin Shen

Thank you very much for the code..

It really worked well. Cheers :)

Leave a Reply