tags:

views:

263

answers:

2

Im creating a simple message system with a mail inbox like UI. I have a select box that witll control a list of check box one for each message. It works fine but i need it with less code lines.

heres my code:

jQuery("#select_deselect").change(function(){
  switch (jQuery(this).val()){
   case 'unread':
    jQuery("input[class=new_message]").each(function(){
     jQuery(this).attr("checked", "checked");
    });
    jQuery("input[class=message]").each(function(){
     jQuery(this).removeAttr("checked");
    });
   break;
   case 'read':
    jQuery("input[class=message]").each(function(){
     jQuery(this).attr("checked", "checked");
    });
    jQuery("input[class=new_message]").each(function(){
     jQuery(this).removeAttr("checked");
    });
   break;
   case 'all':
    jQuery("input[class=new_message]").each(function(){
     jQuery(this).attr("checked", "checked");
    });
    jQuery("input[class=message]").each(function(){
     jQuery(this).attr("checked", "checked");
    });
   break;
   case 'none':
     jQuery("input[class=new_message]").each(function(){
     jQuery(this).removeAttr("checked");
    });
    jQuery("input[class=message]").each(function(){
     jQuery(this).removeAttr("checked");
    });
   break;
   default:
    jQuery("input[class=new_message]").each(function(){
     jQuery(this).removeAttr("checked");
    });
    jQuery("input[class=message]").each(function(){
     jQuery(this).removeAttr("checked");
    });
   }
 });

select_deselect is the id of my select box with options (null, all, read, unread, none).

new_message is the class asignesd to unread messages

message is the class asigned to read messages

i think a toggle() can doit but it will be the same lines.

Any idea to get this simply as posible

+2  A: 

No need to loop each of the elements after you select them you can just call your .attr() or .removeAttr() on it.

jQuery("#select_deselect").change(function(){
    var newmessage = jQuery("input[class=new_message]");
    var message = jQuery("input[class=message]");
    switch (jQuery(this).val()){
        case 'unread':
            newmessage.attr("checked", "checked");
            message.removeAttr("checked");
        break;
        case 'read':
            message.attr("checked", "checked");
            newmessage.removeAttr("checked");
        break;
        case 'all':
            newmessage.attr("checked", "checked");
            message.attr("checked", "checked");
        break;
        case 'none':
        default:
            newmessage.removeAttr("checked");
            message.removeAttr("checked");
    }
});
PetersenDidIt
+1 for caching the queries.
Kyle Butt
Only caches them per change event but will help if you do anything more then just change the checked value in this function
PetersenDidIt
thanks petersendidit
kraiosis
A: 
jQuery("#select_deselect").change(function(){
  switch (jQuery(this).val()){
   case 'unread':
    jQuery("input[class=new_message]").attr("checked", "checked");
    jQuery("input[class=message]").removeAttr("checked");
   break;
   case 'read':
    jQuery("input[class=message]").attr("checked", "checked");
    jQuery("input[class=new_message]").removeAttr("checked");
   break;
   case 'all':
    jQuery("input[class=message],input[class=new_message]").attr("checked", "checked");
   break;
   case 'none':
   default:
     jQuery("input[class=message],input[class=new_message]").removeAttr("checked");
   break;
   }
 });

I simplified the above by removing the redundant each, and combining the selectors for all and none.

Kyle Butt
As a small optimization, i'd use a local var to store all the input to improve speed on each cases.
Boris Guéry
correct bgy.. kyle.. its a little bit slower with your optimization but thanks ill keep it for other events.
kraiosis