Cochez la case parents avec jQuery

Fondamentalement, j'essaye d'écrire une fonction js que si je coche une case enfant, la case parent vérifie également, si elle n'est pas déjà cochée. J'utilise jquery voici mon html:Cochez la case parents avec jQuery

 <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;"> 
      <li style="margin: 0 0 5px 0;"> 
       <input type="checkbox" checked="checked" class="liParent" id="p1" />Parent1 
       <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;"> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4 
        </li> 
       </ul> 
      </li> 

      <li style="margin: 0 0 5px 0;"> 
       <input type="checkbox" checked="checked" class="liParent" id="p2" />Parent2 
       <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;"> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4 
        </li> 
       </ul> 
      </li> 
</ul>

JS Func

function checkParent(child){ 

if (child != null) { 

    // if child is checked we need to check the parent category  
    if (child.checked) { 
    // get the parent checkbox and check it if not check....need help here.... 
      $(child).parent().parent().parent()...... 

     } 
    } 
}

Source

2010-01-22 Gabe

Pourquoi vous une mise en couleur css lorsque vous essayez de cocher la case parent? Est-ce juste pour tester si le sélecteur a fonctionné? –

juste pour tester :) – Gabe

Vous devrez également mettre à jour vos contrôles d'entrée. Vous devriez avoir l'attribut type = "checkbox" dedans. La plupart des navigateurs ne fonctionneront pas correctement sans cela. FF3 par exemple affiche votre marquage actuel comme toutes les zones de texte, pas les cases à cocher. –

je supprimer le javascript en ligne dans votre code HTML et utiliser jQuery lier pour lier l'événement de vérification:

$(document).ready(function() { 
    $('input.liChild').change(function() { 
     if ($(this).is(':checked')) { 
      $(this).closest('ul').siblings('input:checkbox').attr('checked', true); 
     } 
    }); 
});

Cela liera automatiquement l'événement que vous recherchez à toute entrée avec la classe liChild sans tous ces onclicks.

Source

2010-01-22 17:47:40 Parrots

Je pense que vous voulez le plus proche et non parent. Le parent ne cherchera que l'étape suivante, tandis que le plus proche continuera jusqu'à ce qu'il trouve le sélecteur. – Mark

Ouais juste attrapé ça, merci. – Parrots

* Le plus proche * ou * Parents * fonctionnera, car * Parents * obtient des ancêtres, mais * Parent * obtient juste le parent, ce qui n'est pas assez élevé dans ce cas. L'organiser comme ceci est une bonne idée cependant. –

Cela fonctionne, en fonction de votre structure:

$(child).parent().parent().prev().attr('checked', true);

$(child).closest('ul').prev().attr('checked', true);;

Source

2010-01-22 17:51:03

Cochez la case parents avec jQuery

Répondre

Questions connexes