jquery - クリック時のjqueryラジオグループトグル

Question

$("input[name=sample]").click(function(){
            $("#"+$(this).val()).show();
            $("#"+$("input[name=sample]:not(:checked)").val()).hide();
    });
}); 

これを使用して、2 つの div を切り替えていました。しかし、3 番目の div とラジオ ボタンを追加すると、これは 3 番目の div では機能しませんでした。クリックすると表示されますが、他のものは非表示になりません。何が原因でしょうか?

Answer 1

すべての Div にクラスを追加し、表示する前にそのクラスを非表示にします。(例: class="divHide")

$("input[name=sample]").click(function(){
    $(".divHide").hide();
    $("#"+$(this).val()).show();
});

Answer 2

非表示にする要素が複数あるため、次のようなものを使用します。

$('input[name="sample"]').on('click', function(){
      $("#"+this.value).show();
      $("input[name=sample]:not(:checked)").each(function() {
          $('#'+this.value).hide();
      });
}); 

Answer 3

選択されていない各要素を非表示にします。

$("input[name=sample]").click(function(){
    $("#"+$(this).val()).show();
        $("input[name=sample]:not(:checked)").each(index, item){
            $("#" + $(item).val()).hide();
        });
    });
});