Same jQuery function for multiple form elements. How do I consolidate

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

You can get the ID from the name, like this:

$('input[name^=checkbox_]').click(function() {
  $('#' + this.name)[this.checked ? 'show' : 'hide']('slow');
});

This uses the attribute-starts-with selector to get the inputs, then uses their .name property to get the appropriate element by ID. If it's checked, runs .show('slow'), otherwise .hide('slow') on the element with that ID.

Answer 2

$('input[name^=checkbox]').click(function() {
    if(this.checked){
       $('#' + this.name).show('slow');
    } else{
       $('#' + this.name).hide('slow');
    }

}

Edit: Using the 'starts with' selector would be better than checking the indexOf, like others said

Answer 3

You can use toggle() instead of if ... else here to further reduce code:

('input[name^=checkbox_]').click(function(){
    $('#' + this.name).toggle('slow')
});

Toggle can also run different functions on alternate clicks instead of just hiding/showing elements:

('input[name^=checkbox_]').toggle(function(){
    $('#' + this.name).hide('slow')
}, function(){
    $('#' + this.name).show('slow')
    } );

Answer 4

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');
});