在switch语句中使用复选框

Question

我正在创建一个网站，我希望不同的div显示取决于复选框的组合。我需要知道如何在switch语句中引用复选框的类。这是迄今为止我所拥有的。有关我如何使其工作的任何建议？

我试图用“class”来指代复选框的类。例如，如果我点击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。