Show elements according selected checkbox with combinations

Show content based on selected combination of checkboxes

by alonsoct

HTML

<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="div1 imgMap col-12">
                                    <img src="http://172.27.17.72/media/2517/nal.svg" alt="nacionales">
                                </div>
                                <div class="div2 imgMap col-12">
                                    <img src="http://172.27.17.72/media/2512/eeuu_can.svg" alt="usa y canadá">
                                </div>
                                <div class="div3 imgMap col-12">
                                    <img src="http://172.27.17.72/media/2511/cent_sud.svg" alt="image for latinoamerica">
                                </div>
                                <div class="div4 imgMap activeMap col-12" style="display:block;">
                                    <img src="http://172.27.17.72/media/2518/off.svg" alt="default">
                                </div>
                                <div class="div5 imgMap col-12">
                                    <img src="http://172.27.17.72/media/2519/on.svg" alt="destinos">
                                </div>
                                <div class="div6 imgMap col-12">
                                    <img src="http://172.27.17.72/media/2516/nal_eeuu_can.svg" alt="nacionales+usa_y_canada">
                                </div>
                                <div class="div7 imgMap col-12">
                                    <img src="http://172.27.17.72/media/2514/nal_cent_sud.svg" alt="nacionales+latinoamerica">
                                </div>
                                <div class="div8 imgMap col-12">
                                    <img...

CSS

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

JavaScript

$(".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').hide();
                break;
            case '#nationals':
                $(".div1").fadeIn(400).siblings('.imgMap').hide();
                break;
            case '#usa_canada':
                $(".div2").fadeIn(400).siblings('.imgMap').hide();
                break;
            case '#latinoamerica':
                $(".div3").fadeIn(400).siblings('.imgMap').hide();
                break;
            case '#nationals#usa_canada':
                $(".div6").fadeIn(400).siblings('.imgMap').hide();
                break;
            case '#nationals#latinoamerica':
                $(".div7").fadeIn(400).siblings('.imgMap').hide();
                break;
             case '#usa_canada#latinoamerica':
                $(".div8").fadeIn(400).siblings('.imgMap').hide();
                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').hide();
                break;
          case '#nationals':
                $(".div8").fadeIn(400).siblings('.imgMap').hide();
                break;
          case '#usa_canada':
                $(".div7").fadeIn(400).siblings('.imgMap').hide();
                break;
          case '#latinoamerica':
                $(".div6").fadeIn(400).siblings('.imgMap').hide();
                break;
          case '#nationals#usa_canada':
               ...