使用jQuery

Question

我有几个复选框字段嵌套在表td中，如下所示：

<td>
    <div class="am-checkbox ChangeCheckbox">
        <input id="check20" type="checkbox" checked="checked">
        <label for="check10"> </label> 
     </div>
</td>

现在所有其他复选框也具有相同的结构....现在我想要做的是触发click事件以更改复选框的状态，并在单击它时选中/取消选中它...

我在这里通过jQuery做的事情如下：

$(document).on("click", ".ChangeCheckbox", function () {
    // $('#check20').attr('checked', false);
    // console.log($(this).closest("tr"));
    // console.log($(this).closest("tr").find('td:eq(2)'));
    $(this).closest("tr").find('td:eq(2)').attr('checked', false);
});

我正在尝试找到触发事件的行，然后是＃2列（eq（2）），这是放置复选框的列...

现在我唯一不知道如何解决的问题是如何在选择的第二列之后访问输入复选框类型，如下所示：

// how to select now the checkbox and set it's attribute to unchecked?
$(this).closest("tr").find('td:eq(2)') 

有人能帮助我吗？

Answer 1

像这样使用parents：

$(this).parents("tr:first").find('td:eq(2) > input[type="checkbox"]').attr('checked', false);

Answer 2

您可以使用:checkbox伪选择器。 http://api.jquery.com/checkbox-selector

在您的情况下，这将是：

$(this).closest("tr")
       .find('td:eq(2)')
       .find(":checkbox").att‌​r("checked", false);

修改

要切换，最简单的方法是首先获取复选框，然后只使用!对应当前值：

var chk = $(this).closest("tr")
                 .find('td:eq(2)')
                 .find(":checkbox");

chk.prop("checked", !chk.prop("checked"));

（我们应该使用.prop选中复选框，而不是.attr）

您将发现的下一个问题是，如果您直接单击该复选框，则不会更改 - 因为复选框和 tr获取点击事件，取消每个事件。您需要取消复选框上的勾号。