Question

我正在使用像UI这样的邮件收件箱创建一个简单的邮件系统。我有一个选择框，它可以控制每条消息的复选框列表。它工作正常，但我需要更少的代码行。

继承我的代码：

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是我的选择框的id，带有选项（null，all，read，unread，none）。

new_message是未读消息的类

消息是用于读取消息的类

我认为toggle（）可以做，但它将是相同的行。

任何想法都可以将其简单地视为可行

Answer 1

选择它们后无需循环每个元素，只需在其上调用.attr（）或.removeAttr（）即可。

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

Answer 2

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

我通过删除冗余，并将选择器组合为all和none来简化上述内容。

选择更改时，复选框属性更好的ajax切换性能

2 个答案: