Question

I am trying to figure out why it is that this line of code won’t perform inside of the sent messages tab. It works fine inside the inbox but not sent. As well I’m also trying to figure out why the body checkboxes aren’t being centering when I have the text align center style applied inline for them.

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

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

UPDATE: http://jsfiddle.net/Ytx9D/4/

Answer 1

You have more than one DOM node with id="selectall" so jQuery is only binding the event to the first one.

You can prove this by clicking the select all button in the “Inbox messages” and then switching to “Sent messages” and you’ll see they’re all checked.

The solution is to namespace these and change them to classes.

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

Then your jQuery would look like this:

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