2011-01-19 20 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 =「選中最喜歡的紅色」

抱歉,暫無法評論。

相關問題