Question

从下面的代码中，我无法让input[radio]检查表格中的选定行。以下代码使用 HTML5 和 JQuery 1.10.2 。

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            input[type="radio"] {
                margin: 10px;
            }
        </style>
        <script src="jquery-1.10.2.min.js" />
        <script>            
            $(function() {
                $("#table_list tr").click(function() {
                    $(this).find("td input:radio").prop("checked", true);
                });
            });
        </script>
    </head>
    <body>
        <table id="table_list">
            <thead>
                <th></th>
                <th>Name</th>
                <th>Email</th>              
            </thead>
            <tbody>
                <tr>
                    <td><input type="radio" name="record"/></th>
                    <td>Sample1</td>
                    <td>sample_1@sample.com</td>
                </tr>
                <tr>
                    <th><input type="radio" name="record"/></th>
                    <td>Sample1</td>
                    <td>sample_1@sample.com</td>                    
                </tr>
            </tbody>
        </table>        
    </body>
</html>

Answer 1

您的第一个输入位于td，第二个输入位于th。您必须从输入选择器中移除td：working codepen

$(function() {
    $("#table_list tr").click(function() {
        $(this).find("input:radio").prop("checked", true);
    });
});

附加的javascript适用于两者..另一种选择是将th更改为td并保持选择器的原样。

注意：您在评论中提到了一些标记问题。（忘了tr中的thead）

Answer 2

请查看http://jsbin.com/atosaq/4/edit

$(document).ready(function(){
  $('#table_list tr').on("click",function(){
$(this).find('input[type=radio]').prop("checked", true);
  });
});

带有无线电行选择的HTML5 tr

2 个答案: