javascript - 选择全部和一个时切换的 div 消失

Question

我有一个页面，如果用户在其中选择一个选项，它将显示一个 div。该脚本运行良好，除非用户选择 d(显示 a、b、c)，然后选择另一个选项，如 a。这将删除 a 但显示 b 和 c。我的问题是，如果用户选择 c 然后选择 a，则脚本不应删除 a 作为选项。

下面是脚本。 div 的 ID 是“一个盒子”、“两个盒子”和“三个盒子”。它的 fiddle 在这里:https://jsfiddle.net/bcLuo0bg/8/这里有一个实时版本:http://warranty.2-10.com/TestforYou

<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
    if($(this).attr("id")=="a"){
        $(".one").toggle();
    }
    if($(this).attr("id")=="b"){
        $(".two").toggle();
    }
    if($(this).attr("id")=="c"){
        $(".three").toggle();
    }
     if($(this).attr("id")=="d"){
        $(".box").toggle();
    } 

});
});
</script>

Answer 1

最简单的方法是在执行你想要的之前隐藏所有

$('input[type="checkbox"]').click(function(){
    $(".box").hide();
    if($(this).attr("id")=="a"){
        $(".one").toggle();
    }
    if($(this).attr("id")=="b"){
        $(".two").toggle();
    }
    if($(this).attr("id")=="c"){
        $(".three").toggle();
    }
     if($(this).attr("id")=="d"){
        $(".box").toggle();
    } 

});