2011-01-19 50 views
0

我的邮件收件箱html表格存储复选框中的前2列。第一列复选框显示在下面的代码中选择用户使用javascript/jquery查询的所有收件箱邮件

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

我想要做的是,现在有一个功能,会选择所有已被选定为用户喜爱的消息。但是我希望在第一列复选框中选择消息,就像所有其他选择选项一样。

我想要做的就是后来的使用户能够删除选择,移动选择等

我将如何实现这一目标?

回答

2

一类添加到行元素,当用户使得它的最爱,像这样:

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

此外,类添加到您选择的复选框,这样,输入元素:

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

这样,以后你可以简单地触发所有的最爱选择一个按钮,像这样:

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

件有些事情要记住:

  • 输入元素实际上并不需要为被检查的属性值,属性仅仅存在就足以表示“选中”的想法。
  • 如果您正在处理复杂的选择器,将结果本地缓存在函数的顶部并在稍后重新使用它会更有效。
+0

两行都已经有了类。所以我将无法添加多个班级。例如。输入第一列已经有一个类.. – LondonGuy 2011-01-19 15:28:17

+1

@Psychonetics如果你用空格分隔名字,一个元素可以有多个类。`` – Wiseguy 2011-01-19 15:40:32

0

您可以使用它们之间的空格添加多个类。 class =“选中最喜欢的红色”

抱歉,暂无法评论。