用户点击table中一行则选中raido

最新推荐文章于 2024-02-17 18:39:30 发布

原创最新推荐文章于 2024-02-17 18:39:30 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

112 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的功能：当用户点击表格行时，该行中的单选按钮会被选中。通过简单的JavaScript代码实现了交互效果，提高了用户体验。

<html>

  <head>

    <title>test</title>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#table_list tr:gt(0)").click(function(){

                    $(this).find(":radio").prop("checked",true);

            });

        });

    </script>

  </head>

  <body> 

          <table id="table_list">

              <tr>

                  <th></th>

                  <th>用户名</th>

                  <th>创建时间</th>

              </tr>

            <tr>

                <td><input
  type="radio" value="1" ></td>

                <td>User1</td>

                <td>2017-01-06</td>

            </tr>

            <tr>

                <td><input
  type="radio" value="2" ></td>

                <td>User2</td>

                <td>2017-01-06</td>

            </tr>   

            <tr>

                <td><input type="radio" value="3" ></td>

                <td>User3</td>

                <td>2017-01-06</td>

            </tr>       

        </table> 

  </body>

</html>