Выбор всех входящих сообщений, которые пользователь проверил, используя javascript / jquery

Question

Первые 2 столбца в моем почтовом ящике. Первый флажок столбца показан в коде ниже

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

Пользователь имеет возможность выбирать все, не прочитанные, непрочитанные или отвеченные сообщения.

<table width="55%" border="0">
  <tr><p id="links">
    <a href="#" id="all" class="pseudo">all</a>,
    <a href="#" id="none" class="pseudo">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>

Второй флажок показан в коде ниже.

<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>

Заменяется на изображение с помощью jquery. Когда пользователь щелкает изображение, оно заменяется цветным изображением, и это означает, что пользователь выбрал конкретное сообщение в качестве избранного. В базе данных любимый столбец 0 = не избранный, а 1 = любимый.

Ниже приведен код, который помогает при выборе определенных флажков в первом столбце флажка.

('#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 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
        }
  }
});

Теперь я хочу иметь функцию, которая выбирает все сообщения, которые были выбраны пользователем в качестве избранных. Но я бы хотел, чтобы сообщения выбирались в первом столбце, как и все остальные варианты выбора.

Что я хочу сделать позже, так это предоставить пользователям возможность удалять выделение, перемещать выделение и т. Д.

Как бы я этого достиг?

Answer 1

Добавьте класс к элементу строки, когда пользователь сделает его избранным, например:

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

Кроме того, добавьте класс к элементу ввода, который является вашим выбранным флажком, например:

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

Таким образом, позже вы можете просто запустить выбор всех избранных с помощью кнопки, например так:

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

Некоторые вещи, которые нужно иметь в виду:

• Элемент input на самом деле не нуждается в значении для проверенного атрибута, просто наличие атрибута достаточно для обозначения идеи «проверено».
• Если вы работаете со сложными селекторами, более эффективно кешировать результаты локально в верхней части вашей функции и использовать их позже.

Answer 2

Вы можете добавить несколько классов, используя пробел между ними.класс = "отмечен любимым красным"

извините, комментировать пока не могу.