Question

In the script below, I’m attempting to evaluate all checkbox items with class “cb-checkURL” and if checked, I want to set the nearest “.wl-options” div to display:block via jQuery show().

However, I’m missing something, the .each is not doing the job. Any ideas?

jQuery(document).ready(function(){
    jQuery.each( ".cb-checkURL", function() {
        if(jQuery(this).attr("checked")){
            jQuery(this).parent().next(".wl-options").show();
        }
        else
        {
            jQuery(this).parent().next(".wl-options").hide();
        }
    });

    jQuery(".cb-checkURL").click(
        function(){
            jQuery(this).parent().next(".wl-options").toggle();
        });
})';

HTML SOURCE

<label class="wl-active">
    <input class="cb-checkURL" type="checkbox" name="wl[item-2][location][is_url]" checked="checked">&nbsp;URL
</label>
<div class="wl-options" style="clear:both;max-width:400px;display:none">
    <div class="cb-urls">
        <label title="Enter one url slug per line" for="wl[item-2][url][urls]"></label>
        <textarea name="wl[item-2][url][urls]" id="wl[item-2][url][urls]"></textarea>
    </div>
</div>

Answer 1

It could be much more simple:

jQuery(document).ready(function(){
    var handler = function() {       
        jQuery(this).parent().next(".wl-options").toggle(jQuery(this).is(':checked'));        
    };

    jQuery(".cb-checkURL").click(handler).each(handler);          
});

JSFiddle: http://jsfiddle.net/jA4wS/