Selecting all inbox messages user has checked using javascript/jquery

The first 2 columns in my message inbox html table store checkboxes. The first column checkbox is shown in code below

<td width="5%"><input name="message" id="messages" type="checkbox" value="" class="<?php echo $status; ?>"/></td> 

A user has the ability to select all, non, read, unread or replied messages.

<table width="55%" border="0">
  <tr><p id="links">
    <a href="#" id="all" class="pseudo">all</a>,
    <a href="#" id="none" class="pse开发者_运维技巧udo">none</a>, <!-- word active removed from after pseudo-->
    <a href="#" id="read" class="pseudo">read</a>,    
    <a href="#" id="unread" class="pseudo">unread</a>,
    <a href="#" id="replied" class="pseudo">replied</a>,
    <a href="#" id="favourite" class="pseudo">favourite</a> <!-- This link is for favourites-->
</p>
    <td width="1%">Select</td>
    <td width="1%">Favourites</td>
    <td width="1%">Status</td>
    <td width="1%">From</td>
    <td width="30%">Subject/Message</td>
    <td width="17%">Date/Time</td>
  </tr>

The second checkbox is shown in code below.

<td width="5%"><input name="" id="" type="checkbox" value="" <?php if ($row['favourite'] == 1) {echo 'checked="checked"';} else { echo ''; }?> class="favourite" messageid ="<?php echo $row['id']; ?>"/></td>

It is replaced by an image using jquery. When a user clicks the image it is replace with a colour image and it means the user has selected the specific message as a favourite. In the database favourite column 0 = not favourite and 1 = favourite.

Below is the code that helps with the selection of specific checkboxes in the first checkbox column.

('#links').delegate('a', 'click', function(ev) {
    // reset all checkboxes
    $('tr>td:first-child>input:checkbox').attr('checked', false);

    // get info, what is the user choice
    whichMessages = $(this).attr('id');

    // do our main work - select checkboxes
    switch (whichMessages) {
    case 'all':
        $('tr>td:first-child>input:checkbox').attr('checked', true); //selects all from first checkbox column
        break;
    case 'read':
        $('tr>td:first-child>input:checkbox.read').attr('checked', true);
        break;
    case 'unread':
        $('tr>td:first-child>input:checkbox.unread').attr('checked', true);
        break;
    case 'replied':
        $('tr>td:first-child>input:checkbox.replied').attr('checked', true);
        break;

    };

    // add some user-frendly markup
    $('#links a').removeClass('active');
    $(this).addClass('active');

    // and standard action to prevent standard link click event
    ev.preventDefault();
});

Favourite checkbox code

// favourite check box
    $('input.favourite:checkbox').simpleImageCheck({
  image: '<?php echo base_url()?>images/messages/unchecked.png',
  imageChecked: '<?php echo base_url()?>images/messages/check.png',
  afterCheck: function(isChecked) {
     if (isChecked) {

 //query to db from php to update favourite number to 1
     $.post('<?php echo base_url()?>messages/favourite_checked/'+$(this).attr('messageid')); //post to messages controller, favourite_checked method and add message id to url

    }
    if (!isChecked)
        {
//query to db from php to update favourite number to 0
     $.post('<?php echo base_url()?>messages/favourite_unchecked/'+$(this).attr('messageid')); //post to messages controller, favourite_unchecked method and add message id to url
        }
  }
});

What I want to do is now have a feature that selects all the messages that have been selected as a favourite by the user. But I would like the messages to be selected in first column checkboxes just like all the other selection options.

What I want to do later is make it possible for users to delete selection, move selection etc.

How would I achieve this?

Add a class to the row element when the user makes it a favorite, like this:

<tr class="favorite"> ... </tr>

Also, add a class to the input element that is your select checkbox, like this:

<td><input type="checkbox" class="selector" /> ... </td>

That way, later on you can simply trigger selection of all favorites with a button, like this:

$("#favourite").click(function() {
    var $favorites = $(".favorite");
    $favorites.find(".selector").attr("checked", "");
});

Some things to keep in mind:

• The input element doesn't actually need a value for the checked attribute, simply the presence of the attribute is enough to denote the idea of "checked".
• If you are working with complex selectors it's more efficient to cache the results locally at the top of your function and re-use them later.

You can add multiple classes by using a space between them. class="checked favorite red"

sorry, not able to comment yet.