Get "vérifié" est une entrée état

J'ai cette structure HTML de base:Get "vérifié" est une entrée état

<fieldset> 
    <input/> 
    <label></label> 
    <div class="toggle_box"> 
     <div class="switch"></div> 
    </div> 
</fieldset>

Je voudrais que cela se produise quand mon entrée est vérifié:

<fieldset> 
    <input checked="checked" /> 
    <label></label> 
    <div class="toggle_box"> 
     <div class="switch" state="on"></div> 
    </div> 
</fieldset>

Ajouter state = "on" à le commutateur div. Y a-t-il un sélecteur dans jquery que je peux utiliser pour obtenir l'état vérifié de cette entrée particulière? (il y en a plusieurs sur une page)

Merci pour votre brainstorming!

Source

2011-05-17 cmplieger

This works; vous devrez ajouter type="checkbox" à vos entrées pour les cocher. (Observer l'effet en inspectant les switchdiv s avec les outils de développement de Chrome ou Firebug.)

$('fieldset input[type=checkbox]').change(function() { 
    var el=$(this).parent().find('.switch'); 
    if ($(this).is(':checked')) el.attr('state','on'); 
    else el.removeAttr('state'); 
});

Source

2011-05-17 02:43:32 josh3736

@josh cela devrait fonctionner trop à droite: $ ('entrée fieldset [type = case à cocher]: checked').. Parent() trouver ('.switch'). attr ('état', 'activé'); ??? – cmplieger

@josh, juste pour savoir, pouvons-nous utiliser l'attribut 'state' pour tag DIV? ou nous pouvons utiliser n'importe quel "foo", "bar", .. – Hoque

@SnippetSpace: Cela dépend de ce que vous faites. Cela n'ajoutera que 'state =" sur "' '' div's associés aux entrées vérifiées * lorsque cette ligne de code est exécutée *. Si vous faites cela à partir d'une fonction de soumission, tout va bien. Ci-dessus, j'inscris un gestionnaire d'évènement (via 'change()') pour que l'attribut 'state' soit mis à jour dynamiquement quand l'utilisateur cocher ou décocher une case. – josh3736

Vous pouvez mettre tous ces divs dans un autre div, puis obtenir le div père * document.getElementById *, trouver div vous voulez dans le contenu et le changer.

<div id="fatherOfTheDivs"> 
     <fieldset> 
      <input/> 
      <label></label> 
      <div class="toggle_box"> 
       <div id="div1" class="switch"></div> 
      </div> 
     </fieldset> 

     <fieldset> 
      <input/> 
      <label></label> 
      <div id="div2" class="toggle_box"> 
       <div class="switch"></div> 
      </div> 
     </fieldset> 
</div>

Source

2011-05-17 02:46:07

Ceci l'accomplira pour vous.

$('input:checkbox').change(function() { 
    if ($(this).is(':checked')) { 
     $(this).parent().children('div.toggle_box').children('div.switch').attr('state', 'on'); 
    } else { 
     $(this).parent().children('div.toggle_box').children('div.switch').removeAttr('state'); 
    } 
});

Vous devrez également modifier votre <input /> à <input type="checkbox" />

Source

2011-05-17 03:34:51

Get "vérifié" est une entrée état

Répondre

Questions connexes