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

0

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

<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
        }
  }
});

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

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

Как я могу это достичь?

Теги:
templates

2 ответа

2
Лучший ответ

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

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

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

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

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

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

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

  • Элементу ввода фактически не нужно значение для проверенного атрибута, просто наличие атрибута достаточно для обозначения идеи "проверено".
  • Если вы работаете со сложными селекторами, более эффективно кэшировать результаты локально в верхней части вашей функции и повторно использовать их позже.
  • 0
    Обе строки уже имеют классы. Поэтому я не смогу добавить более одного класса. Например, в первом столбце уже есть класс.
  • 1
    @Psychonetics Элемент может иметь несколько классов, если вы разделяете имена пробелами. <tr class="class1 class2 class3">
Показать ещё 1 комментарий
0

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

извините, не в состоянии дать комментарий.

  • 0
    Нет проблем. Ваш ответ помог и приветствуется.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню