Question

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

我试图使用＆＃34; class＆＃34;引用复选框的类。例如，如果我单击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。

在switch语句中使用复选框

1 个答案: