Question

我有一个页面，如果用户选择一个选项，它将显示一个div。除非用户选择d（显示a，b，c）然后选择另一个选项，例如a，脚本才能正常工作。这将删除a但显示b和c。我的问题是，如果用户选择c然后选择a，则脚本不应删除a作为选项。

以下是脚本。 div的ID是“一个盒子”，“两个盒子”和“三个盒子”。它的小提琴就在这里：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();
    } 

});

Answer 2

我会把$（“。box”）。hide（）;在onclick回调之外，首先隐藏所有div。

Answer 3

将.box { display: none; }添加到您的CSS文件中。通过CSS隐藏通常比使用jQuery / javascript更有效，因为CSS首先加载。 jQuery / javascript必须等待DOM完成加载。

当选择全部和一个时，切换的div消失

3 个答案: