Использовать флажок в операторе switch

Question

Я создаю сайт, на котором я хочу, чтобы разные divs отображались в зависимости от комбинации отмеченных флажков. Мне нужно знать, как обращаться к классу флажков в инструкции switch. Вот что я до сих пор. Любые предложения о том, как я могу заставить его работать?

Я пытаюсь использовать «класс», чтобы обратиться к классу флажков. Например, если я нажму на checkbox3, и checkbox1 уже нажал, я хочу, чтобы div2 появился. Если checkbox1 не был нажат, я хочу, чтобы div4 появился.

$ (".checkbox3").click(function(){  
switch ($('input:checkbox:checked').attr('class')) { 
    case ".checkbox1" && ".checkbox2": 
    $(".div1").fadeIn("slow"); 
    break; 
    case ".checkbox1": 
    $(".div2").fadeIn("slow"); 
    break; 
    case ".checkbox2": 
    $(".div3").fadeIn("slow"); 
    break; 
    default: 
    $(".div4").fadeIn("slow"); 
    break; 
    } 
    }); 

Вот код HTML, на который он ссылается.

<form> 
<input type="checkbox" id="redcheck" class="checkbox1"> 
<input type="checkbox" id="greencheck" class="checkbox2"> 
<input type="checkbox" id="bluecheck" class="checkbox3"> 
</form> 
<div class="div1"></div> 
<div class="div2"></div> 
<div class="div3"></div> 
<div class="div4"></div> 

Любая помощь была бы действительно полезной! Благодаря!

Answer 1

Вы можете обратиться к проверенным флажков в JQuery следующим образом:

$('input:checkbox:checked') 

Что вы можете сделать что-то вроде этого:

$ (".checkbox3").change(function(){  
    var val=''; 

    if($(this).is(':checked')) { 

     $.each($('input:checkbox:checked:not(.checkbox3:checkbox)'), function(index) { 
      val += '.' + $(this).attr('class');   
     }); 

     switch (val) { 
      case '.checkbox1.checkbox2': 
       $(".div1").fadeIn(400); 
       console.log('case 1'); 
       break; 
      case '.checkbox1': 
       $(".div2").fadeIn(400); 
       console.log('case 2'); 
       break; 
      case '.checkbox2': 
       $(".div3").fadeIn(400); 
       console.log('case 3'); 
       break; 
      default: 
       $(".div4").fadeIn(400); 
       console.log('case 4'); 
       break; 
     } 
    } else { 
     $('div[class*="div"]').hide(); 
    } 
}); 

Вот link to fiddle.