liaison de la case HTML avec l'élément à masquer lorsque la case n'est pas cochée

Question

Quel est un bon modèle pour ajouter des données supplémentaires à un élément HTML ?Par exemple, j'aimerais lier une case à cocher au code HTML que je souhaite masquer lorsque la case n'est pas cochée.Comme le for attribut d'un label élément, je souhaite spécifier le lien dans le balisage afin de pouvoir écrire un script simple et générique pour parcourir toutes les cases à cocher et connecter un gestionnaire d'événements jquery pour effectuer le masquage/affichage.

Par exemple, dans ce HTML :

<input type="checkbox" id="showFoo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

A quoi ça sert de faire savoir ça à mon script #showFoo est liée à #foo?Idéalement, quelque chose qui ne rend pas mon code HTML non valide ou qui ne m'oblige pas à utiliser une convention de dénomination spécifique pour les identifiants.Crédit supplémentaire si cela rend mon script plus efficace.

Answer 1

utiliser un data-[key] attribut pour identifier ce que #showFoo devrait contrôler

exemple jsfiddle

HTML :

<input type="checkbox" id="showFoo" data-toggles="foo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

jQuery :

$('#showFoo').change(function() {
    $('#' + $(this).data('toggles')).toggle();
});

Answer 2

Cela semble être un cas parfait pour les éléments de données.

<input type="checkbox" id="showFoo" data-relateddiv="foo" />

Puis dans un gestionnaire d'événements sur les cases à cocher :

$('#' + $(this).data("relateddiv")).show();

Answer 3

Vous pouvez utiliser l'attribut "rel"

<input type="checkbox" id="showFoo" rel="foo" />

$('#showFoo').click(function(){
  var element_id = $(this).attr('rel');
  var element = $('#'+element_id);
  if(element.is(':hidden')){
    element.slideDown();
    //element.show();
  }
  else{
    element.slideUp();
    //element.hide();
  }
});

Answer 4

Je l'utilise actuellement

element.each(function(i, e) {  
            var checked = $(e).prop('checked'),
                foo = */Relationship betweeen element and foo*/;
            foo .toggleClass('invisibleClass', checked)
                .toggleClass('visibleClass', !checked);
        });

dans le cas où vous avez plusieurs foos et éléments (vous devez d'abord définir la relation entre eux)

Exécutez-le sur l'événement de votre choix

Answer 5

Essayez ci-dessous

if (checkboxIsChecked) {
foo.visibility:visible;
} else {
foo.visibility:hidden;
}