Jquery：チェックボックスでdivを表示/非表示にする初期状態を確認する

Question

関連するチェックボックスをオンにするとdivを非表示にしようとしています。

チェックボックスの最初のjstateで動作させるには、triggerHandler（ 'click'）を追加しました。

これは最初のチェックボックスで問題なく動作しますが、他のチェックボックスでは問題ありません。

提案がありますか？ここ

フィドル：http://jsfiddle.net/tb5Yt/100/

感謝します。

すべてのHTML

1<input type = "checkbox" id = "1" checked> 
2<input type = "checkbox" id = "2" > 
3<input type = "checkbox" id = "3" checked> 

<div class = "1"> 
    //Contains 1 elements remove when checked 
</div> 

<div class = "2"> 
    //Contains 2 elements remove when checked 
</div> 

<div class = "3"> 
    //Contains 3 elements remove when checked 
</div> 

のjQuery

$(document).ready(function() { 

$("input[type=checkbox]").click(function() 

{ 
    divId = $(this).attr("id"); 

    if ($(this).is(":checked")) { 
     $("." + divId).hide(); 
    } 
    else if ($(this).not(":checked")) { 
     $("." + divId).show(); 
    } 

}).triggerHandler('click'); 

}); 

Answer 1

まずあなたがelse if一部を行うべきではありません。それ以外は一人でやります。

秒同じセレクタでclick関数を呼び出そうとします。次のコードを試してください：

$(document).ready(function() { 

    $("input[type=checkbox]").change(function() 
    { 
     var divId = $(this).attr("id"); 

     if ($(this).is(":checked")) { 
      $("." + divId).hide(); 
     } 
     else{ 
      $("." + divId).show(); 
     } 

    }); 
    $("input[type=checkbox]").change(); 

});​ 

EDIT：代わりにchangeイベントを使用してみてください。 See this example.

Answer 2

あなたはこのしてみてください、クリックイベントが発生したときにページの読み込み時に、あなたのコードを実行するだけでなく、する必要があります：あなたは私が単にelse if句を改正する方法もわかります

$("input[type=checkbox]") 
    .each(setDivs) // on load 
    .change(setDivs); // on click 

function setDivs() { 
    divId = $(this).attr("id"); 

    if ($(this).is(":checked")) { 
     $("." + divId).hide(); 
    } 
    else { 
     $("." + divId).show(); 
    } 
} 

をelseを使用し、clickイベントをchangeに変更して、ユーザーがキーボードを使用してオプションを選択できるようにしました。

Example fiddle

Answer 3

はあなたのコードを変更する自由を取りました。

$(document).ready(function() { 
    function toggleDiv() { 
     var $this = $(this); 
     $("." + $this.attr('id'))[$this.is(':checked') ? 'hide' : 'show'](); 
    } 
    $('input:checkbox').each(toggleDiv).click(toggleDiv); 
});​ 

http://jsfiddle.net/tb5Yt/123/