根据唯一选择或不同的复选框组合（例如，超过 2 个）显示内容

Question

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

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

示例：

如果我选中任何独特的框，或任何框的组合正确显示单个选择或相应组合的结果，但如果我取消选中或删除任何选择，它们将停止工作并且不会显示假定的活动选择，或未选择任何内容时的默认选择。

我在这个fiddle工作url：https://jsfiddle.net/alonsoct/9koqe4fr/

感谢您的帮助！

Answer 1

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

我更改了 jQuery 以将 val 设置为等于所有要检查的元素的 ID。（如果选中 none 则它将为空，这很好）。
接下来，如果选中 none，它会将 val 设置为 all_off。
然后，它设置val等于all_on，如果通过比较编号检查的总数来检查所有。
最后，它将 val 导出到 div 的 innerHTML，显示给用户。

/*I need to show the corresponding image according to the checkbox controls selection, it works at the moment of selecting a box and showing its respective content, but if I remove the selection from some of them it doesn't work anymore.*/


/*Example
If I check any box, or any combination of boxes shows me correctly the result of the selection or combination, but if I uncheck any of the boxes stops working the switch script*/

/*If I select a unique option and the removal does not show me the default element */


$(".checkboxmark").change(function(){    
    var val=''; 
        
        $.each($('.checkboxmark:checked'), function(i,v) {
        console.log(v.id);
            val += v.id +" "; 
        });
        if($('.checkboxmark:checked').length==0){
        val = "all_off";
        }
        if($('.checkboxmark:checked').length==$('.checkboxmark').length){
        val = "all_on";
        }
        $('.imgMap')[0].innerText = val;
 });

div
{
    background:#ddd;
    width:100px;
    height:100px;
    margin:10px;
 
    
    
}

<form>
<label for="nationals">nationals</label>
 <input type="checkbox" id="nationals" class="checkboxmark">
 <br/>
<label for="usa_canada">usa and canada</label>
 <input type="checkbox" id="usa_canada" class="checkboxmark">
 <br/>
<label for="latinoamerica">latinoamerica</label>
 <input type="checkbox" id="latinoamerica" class="checkboxmark">
</form> 
     
<div class="imgMap"></div>

Answer 2

我用 else 语句更新了我的脚本 https://jsfiddle.net/alonsoct/9koqe4fr/

$(".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;

     }

   });

  } 
 });

根据唯一选择或不同的复选框组合（例如，超过 2 个）显示内容

Show the content based on unique selection or with different combination of checkboxes (ej. more than 2)

html

checkbox

jquery

toggle