すべてと1つが選択されたときに表示されたdivが消える

Question

ユーザーがオプションを選択するとdivを表示するページがあります。ユーザーがd（a、b、cを表示）を選択し、 aのような別のオプションを選択します。これはaを削除しますが、bとcを示します。私の問題は、ユーザがcを選択してからaを選択した場合、スクリプトはaをオプションとして削除すべきではないということです。

以下はスクリプトです。 divのIDは、「1つのボックス」、「2つのボックス」、および「3つのボックス」です。それのためのフィドルはここにある：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

あなたのCSSファイルに.box { display: none; }を追加してください。 CSS経由での隠蔽は、CSSが最初に読み込まれるため、jQuery/javascriptを使用するよりもはるかに効率的です。 jQuery/javascriptは、DOMのロードが完了するまで待つ必要があります。