Même fonction jQuery pour plusieurs éléments de formulaire. Comment consolider

Question

J'ai ce besoin d'afficher et de masquer une div si une case est cochée pour plusieurs cases à cocher.

L'ID de chaque div qui doit être affiché sera le même que le nom des cases à cocher. Existe-t-il un moyen facile d'accomplir ceci sans écrire une fonction pour gérer chaque case à cocher?

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

Il semble que vous ayez un certain type de convention de nommage. Vous pouvez simplement accéder à l'objet de contexte actuel, obtenir le nom et travailler votre convention. Vous voudrez peut-être donner à votre case à cocher les champs une classe css spéciale à faire pour faciliter la sélection:

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

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

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

Answer 2

Vous pouvez obtenir l'ID du nom, comme celui-ci:

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

Il utilise le attribute-starts-with selector pour obtenir les entrées, puis utilise leur .name property pour obtenir l'élément approprié par ID. Si elle est cochée, exécute .show('slow'), sinon .hide('slow') sur l'élément avec cet ID.

Answer 3

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

} 

Edit: En utilisant les 'commence par' sélecteur serait mieux que de vérifier la indexOf, comme d'autres ont dit

Answer 4

Vous pouvez utiliser toggle() au lieu de if ... else ici pour réduire encore le code:

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

Toggle peut également exécuter différentes fonctions sur des clics alternatifs au lieu de simplement masquer/afficher des éléments:

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