Question

I have a private messaging system and would like to have about 4-5 links above the inbox where a user can click if they want to “select all”, “none”, “favourite”, “read” or “unread” messages.

How would I do this using jquery/javascript? Are there any tutorials about that explain this thoroughly? I am not that great with javascript but I’m a quick learner.

I originally really wanted to do a gmail style checkbox drop down but it is proving to be quite difficult and I think having links across of the message inbox would be more user friendly..

Answer 1

My solution on jsFiddle: http://www.jsfiddle.net/pereskokov/sYe4S/6/

HTML:

<p id="links">
    Select <a href="#" id="all" class="pseudo">all</a>, 
    <a href="#" id="none" class="pseudo active">none</a>, 
    <a href="#" id="unread" class="pseudo">unread</a>, 
    <a href="#" id="read" class="pseudo">read</a>, 
    <a href="#" id="fav" class="pseudo">favourite</a>
</p>
<p id="messages">
    <label class="unread">
        <input type="checkbox" name="message" value="1" class="unread" /> Hi, man!
    </label><br/>
    
    <label class="read fav">
        <input type="checkbox" name="message" value="2" class="read fav" /> Cute kittens, look
    </label><br/>
    
    <label class="read">
        <input type="checkbox" name="message" value="3" class="read" /> Pysh-pysh, ololo
    </label><br />
    
    <label class="unread">
        <input type="checkbox" name="message" value="4" class="unread" /> New important task!
    </label><br/>
</p>

CSS:

label.unread {
    font-weight: bold;
}

label.fav {
    background-color: #F5E942;
}

a.pseudo {
    text-decoration: none;
    border-bottom: 1px dashed #4998C9;
    color: #4998C9;
}

a.active {
    background-color: #4998C9;
    color: white;
    padding: 0 0.2em;
}

jQuery:

$('#links').delegate('a', 'click', function(ev) {
    // reset all checkboxes
    $('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':
        $('input:checkbox').attr('checked', true);
        break;
    case 'read':
        $('input:checkbox.read').attr('checked', true);
        break;
    case 'unread':
        $('input:checkbox.unread').attr('checked', true);
        break;
    case 'fav':
        $('input:checkbox.fav').attr('checked', true);
        break;
    };

    // add some user-frendly markup
    $('#links a').removeClass('active');
    $(this).addClass('active');
                  
    // and standart action to prevent standart link click event
    ev.preventDefault();
});

Excuse me, I am the man, who gave you fish, but did not teach you to catch fish.