Wie ein- oder ausblenden divs basierend auf Checkbox Änderungsereignis

Question

ich die Werte zeigen versuche, basierend auf Kontrollkästchen aktivieren und deaktivieren

ich zwei Kontrollkästchen MNC und Worth bekommen haben (nur die Top-Ones), ich bin versucht, zeigen oder die Werte verbergen basierend darauf (pesent unter Klasse Pack-Panel div)

Dies ist mein Code

$(document).on('change', '.filtermnc', function() { 
$(".pack-panel").each(function() { 
    var visible = $(this).find('.mnccheckbox').prop('checked') 
    $(this).toggle(visible); 
    }); 
    }); 


$(document).on('change', '.filterworth', function() { 
$(".pack-panel").each(function() { 
    var visible = $(this).find('.worthcheckbox').prop('checked') 
    $(this).toggle(visible); 
    }); 
    }); 

Wenn ich mit diesem Code versucht, ist es nicht funktioniert und es wird auch überprüft alle entsprechende Checkboxen

Bitte lassen Sie mich wissen, wie Sie dies erreichen können. http://jsfiddle.net/F8Vk2/121/

Answer 1

Ihre js ändern zu

$(document).on('change', '.filtermnc', function() { 
    var visible = $(this).prop('checked') 
    if(visible) 
     $('.mnccheckbox').closest("li").show(); 
    else 
     $('.mnccheckbox').closest("li").hide(); 
    }); 


$(document).on('change', '.filterworth', function() { 
var visible = $(this).prop('checked') 
    if(visible) 
     $('.worthcheckbox').closest("li").show(); 
    else 
     $('.worthcheckbox').closest("li").hide(); 

    }); 

http://jsfiddle.net/F8Vk2/123/

Answer 2

ich für einen gemacht, aber es ist nur ein mater von den anderen ändert ebenfalls:

$(document).on('change', '.filterworth, .filtermnc', function() { 
    var $this = $(this), 
    isChecked = $this.is(':checked'), 
    $packPanel = $('.pack-panel'); 

    isChecked ? $packPanel.show() : $packPanel.hide() 

}); 

Sie this verwenden könnte um das Ziel des Ereignisses zu ermitteln und zu überprüfen, ob es von .is(':checked') überprüft wird. Außerdem müssen Sie nicht über $('.pack-panel') iterieren, um Ihre Änderungen zu übernehmen. .toggle() wird die Sichtbarkeit durch die vorherige ändern, also denke ich, dass Sie hart Code zum Ausblenden oder Anzeigen der Panels sollten.

Answer 3

Sie könnten versuchen ->

$(document).on('change', '.filtermnc', function() { 
    $('.mnccheckbox'). 
    closest("li"). 
    toggle($(this).prop('checked')); 
}); 

Diese im Grunde alle mit .mccheckbox Klasse zu finden, und dann auf dem Grundstück der Checkbox basieren Makel Sie das Ereignis zu übertragen.