Jquery: Einstellung div verstecken/zeigen mit Kontrollkästchen Überprüfung des Ausgangszustandes

Question

Ich versuche Divs zu verstecken, wenn das zugehörige Kontrollkästchen aktiviert ist.

Um es mit dem ursprünglichen jstate des Kontrollkästchens arbeiten zu können, habe ich triggerHandler ('click') hinzugefügt.

Dies funktioniert gut für die erste Checkbox, aber nicht für andere.

Irgendwelche Vorschläge?

Fiddle hier: http://jsfiddle.net/tb5Yt/100/

Vielen Dank.

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

Zunächst einmal sollten Sie den else if Teil nicht. sonst allein wird es tun.

Sekunde Ich würde versuchen, die Click-Funktion auf dem gleichen Selektor aufrufen. Bitte versuchen Sie den folgenden Code:

$(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: Versuchen Sie stattdessen das Änderungsereignis verwenden. See this example.

Answer 2

Sie müssen Ihren Code auf Last der Seite auszuführen, sowie, wenn das Click-Ereignis auftritt, versuchen Sie dies:

$("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(); 
    } 
} 

Sie werden auch feststellen, wie ich die else if Klausel geändert einfach ein else und änderte auch das Ereignis click zu change, um Benutzern zu erlauben, Wahlen unter Verwendung ihrer Tastatur auch zu wählen.

Example fiddle

Answer 3

nahm sich die Freiheit, Ihren Code zu ändern.

$(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/