jquery - 切换不适用于所有选项卡和内联文本对齐

Question

我想弄清楚为什么这行代码不会在已发送消息选项卡内执行。它在收件箱内工作正常但未发送。此外，我还试图弄清楚为什么当我为它们应用内联文本对齐中心样式时，正文复选框没有居中。

http://jsfiddle.net/Ytx9D/3/

$('#selectall').toggle(
    function() {
        $('.table .messages').prop('checked', true);
    },
    function() {
        $('.table .messages').prop('checked', false);
    }
);

更新:http://jsfiddle.net/Ytx9D/4/

Answer 1

您有多个带有 id="selectall" 的 DOM 节点，因此 jQuery 仅将事件绑定(bind)到第一个节点。

您可以通过单击“收件箱消息”中的全选按钮然后切换到“已发送消息”来证明这一点，您会看到它们都被选中了。

解决方案是为这些命名空间并将它们更改为类。

<input type="checkbox" name="messages" class="selectall hidden" />

然后你的 jQuery 看起来像这样:

$('.selectall').toggle(
    function() {
        $(this).closest('.table').find('.messages').prop('checked', true);
    },
    function() {
        $(this).closest('.table').find('.messages').prop('checked', false);
    }
);