Question

I have this need to show and hide a div if a checkbox is checked for multiple checkboxes.

Each div’s id that needs to be shown will be the same as the checkboxes name. Is there an easy way to accomplish this without writing a function to handle each checkbox?

    $('input[name=checkbox_1]').click(function() {
        if ($('input[name=checkbox_1]').is(':checked')) {
            $('#checkbox_1').show('slow');
        }

        else {
            $('#checkbox_1').hide('slow');
        }
     });
     $('input[name=checkbox_2]').click(function() {
                   if ($('input[name=checkbox_2]').is(':checked')) {
            $('#checkbox_2').show('slow');
        }

        else {
            $('#checkbox_2').hide('slow');
        }
    });

  });

Answer 1

It looks like you have some type of naming convention going on. You can just reach into the current context object, get the name and work your convention. You might want to give your checkbox fields some special css class to make for easy selection:

$('input.someCssClass').click(function() {

    var selector = '#' + $(this).attr('name');

    if ($(this).is(':checked'))
        $(selector).show('slow');
    else
        $(selector).hide('slow');
});