在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。