Question

这是我的代码，

<tr>
    <td>
        <input type="checkbox" class="cbx" name="cbx">
    </td>
    <td>
        <div>some content</div>
    </td>
    <td>
        <span class="book">Book now</span>
    </td>
</tr>

我的页面中有大约20个与此类似的表行。我想要做的是，当我点击行中第3个td的span标签时，应选中位于同一行的复选框。

我试过这个，但它不起作用，

$('.book').click(function() {
   $(this).parent().find('.cbx').attr('checked',true);
});

请帮我简短一下，

问候。

Answer 1

简单，使用.closest()方法找到tr，然后搜索.cbx！：）

$('.book').click(function() {
   $(this).closest('tr').find('.cbx').prop('checked',true);
});

您的示例指向您的TD因素，因为您仅使用.parent() 要访问TR而不是.parent().parent()，请使用.closest('tr')

http://api.jquery.com/closest/
http://api.jquery.com/prop/

Answer 2

在您的代码中.parent()将选择父<td>个节点。要选择<tr>，您应该使用.parent().parent()或.closest("tr")：

$(".book").on("click", function() {
    $(this).closest("tr").find(".cbx").prop("checked", true);
});

注意，最好应用.prop("checked", true)或.attr("checked", "checked")。

Answer 3

这可以通过

完成

$( '.book' ).on( 'click', function() {
    var $tr = $( this ).parents( 'tr' ).eq( 0 );
    // get the parenting tr

    $( '.cbx', $tr ).attr( 'checked', true );
    // select elements matching '.cbx' inside of $tr and check them
} );

选择上一个元素 - jQuery

3 个答案: