Jquery 基于唯一选择或不同复选框组合显示内容（ej.多于2个）

我需要根据复选框控件的选择显示相应的图像，它在选择一个框并显示其各自的内容时起作用，但是如果我从其中一些框中删除选择，它就不再起作用

   $(".checkboxmark").change(function(){    
      var val=''; 
     if($(this).is(':checked')) {

    $.each($('.checkboxmark:checked'), function(i) {
        val += '#' + $(this).attr('id');        
    });

    switch (val) {
        case '#nationals#usa_canada#latinoamerica':
            $(".div5").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals':
            $(".div1").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#usa_canada':
            $(".div2").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#latinoamerica':
            $(".div3").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#usa_canada':
            $(".div6").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#latinoamerica':
            $(".div7").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
         case '#usa_canada#latinoamerica':
            $(".div8").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        default:
            $(".div4").fadeIn(400);
            break;
    }
 } 
}); 

例如：

如果我选中任何唯一的框或框的任何组合，都会正确地显示单个选择或相应组合的结果，但如果我取消选中或删除任何选择，则会停止工作，并且不会显示假定的活动选择，或者未选择任何内容时的默认选择

我在这个url中有我的工作小提琴：

---

谢谢你的帮助

用很多很多div来做你想做的事情是没有意义的。此外，如果您在将来添加更多选项，则将很难管理。我删除了除一个div之外的所有div，并将其默认为可见。另外,

我已将jQuery更改为将

val

设置为等于所有被检查元素的id。（如果未选中，则它将为空，这是可以的）

接下来，如果未选中任何选项，则将

val

设置为等于

all_off

然后，通过比较已检查的编号与总数，将

val

设置为等于

all_on

（如果全部检查）

最后，它将val导出到div的

innerHTML

，并将其显示给用户

/*我需要根据复选框控件的选择显示相应的图像，它在选择一个框并显示其各自的内容时起作用，但如果我从其中一些框中删除选择，它将不再起作用*/
/*范例
如果我选中任何框或框的任何组合，都会正确显示选择或组合的结果，但如果我取消选中任何框，则会停止使用切换脚本*/
/*如果我选择了一个唯一的选项，并且删除操作没有显示默认元素*/
$（“.checkboxmark”）.change（函数（）{
var-val=''；
$。每个（$（'.checkboxmark:checked'），函数（i，v）{
控制台日志（v.id）；
val+=v.id+“”；
});
if（$（'.checkboxmark:checked'）。长度==0）{
val=“全部关闭”；
}
if（$（'.checkboxmark:checked'）.length==$（'.checkboxmark'）.length）{
val=“全部打开”；
}
$（'.imgMap'）[0].innerText=val；
}); 

div
{
背景：ddd；
宽度：100px；
高度：100px；
利润率：10px；
}

国民


美国和加拿大


拉丁美洲

我用else语句更新了脚本

---

在你的逻辑中，第一个是什么？如果你不勾选复选框，会有什么后果？我更新了我的小提琴，但有很多开关，jeje如果有最佳实践或方法，我希望我能得到帮助。所以，我有点无聊：这确实涉及到对你的结构的一些改变，这就是为什么我从来没有费心回答过。@AlonsoCT你没有回答我关于if语句的问题。@Taplar在我的提琴中，我更新了if语句，并在“else”谢谢中取消了选中的结果，但我需要隐藏其他单独的兄弟姐妹，因为它的功能是在地图上显示不同的命运，我需要显示这些不同的组合。我对每一个案例都有一个图像。ej。如果我选择国民+美国和加拿大，将显示一张带有此选项命运的地图；如果我取消选择Nations，然后选择latinoamerica，则显示的图像将仅显示所选国家的命运options@AlonsoCT我会调整，但同样的想法是正确的。

$(".checkboxmark").change(function(){    
  var val=''; 
  if($(this).is(':checked')) {

    $.each($('.checkboxmark:checked'), function(i) {
        val += '#' + $(this).attr('id');        
    });

    switch (val) {
        case '#nationals#usa_canada#latinoamerica':
            $(".div5").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals':
            $(".div1").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#usa_canada':
            $(".div2").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#latinoamerica':
            $(".div3").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#usa_canada':
            $(".div6").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        case '#nationals#latinoamerica':
            $(".div7").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
         case '#usa_canada#latinoamerica':
            $(".div8").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
        default:
            $(".div5").fadeIn(400);
            break;
    }
}else{


 $.each($('.checkboxmark').not(':checked'), function(i) {
    val += '#' + $(this).attr('id'); 
     switch (val) {
     case '#nationals#usa_canada#latinoamerica':
            $(".div4").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#nationals':
            $(".div8").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#usa_canada':
            $(".div7").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#latinoamerica':
            $(".div6").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#nationals#usa_canada':
            $(".div3").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;    
      case '#nationals#latinoamerica':
            $(".div2").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;
      case '#usa_canada#latinoamerica':
            $(".div1").fadeIn(400).siblings('.imgMap').fadeOut(200);
            break;  
       default:
            $(".div4").fadeIn(400);
            break;

     }

   });

  } 
 });