Question

我需要根据复选框控件的选择显示相应的图像，它在选择一个框并显示其相应内容时起作用，但是如果我从其中的一部分中删除该选择，它将不再起作用。 / p>

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

示例：

如果我选中任何唯一的框，或者框的任何组合正确地显示了单个选择或相应组合的结果，但是如果我取消选中或删除了任何选择，则该选项将停止工作，并且不会显示出我认为有效的选择，或者什么也没有选择时的默认选择。

此网址中有我正在工作的小提琴：https://jsfiddle.net/alonsoct/9koqe4fr/

谢谢您的帮助！

Answer 1

使用很多很多的div来做你想做的事情是没有意义的。另外，如果将来添加更多选项，将很难管理。除了一个div外，我已将其全部删除，并将其默认设置为可见。此外，

我已将jQuery更改为将val设置为等于所有被检查元素的ID。（如果未选中任何选项，那么它将为空，这很好）。
接下来，如果未选中，则将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个）

2 个答案: