php - 使用 javascript/jquery 选择用户已检查的所有收件箱消息

Question

我的消息收件箱 html 表中的前 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", "");
});

需要记住的一些事情:

• 输入元素实际上不需要检查属性的值，只需属性的存在就足以表示“检查”的想法。
• 如果您使用复杂的选择器，将结果缓存在函数顶部本地并在以后重复使用会更高效。