Javascript: case à cocher Dynamic (Fieldset avec les cases à cocher père/enfant)

J'ai un problème ici, lorsque je sélectionne l'une des cases à cocher 'père', toutes les cases à cocher enfant sont activées ou désactivées. J'ai donc besoin de chaque case à cocher père pour affecter son propre jeu de champs enfants. Quelqu'un pourrait m'aider avec ça.Javascript: case à cocher Dynamic (Fieldset avec les cases à cocher père/enfant)

Merci

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>toggle disabled</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
.cssDisabled { color: #ccc; } 
</style> 

<script src="http://prototypejs.org/assets/2009/8/31/prototype.js" type="text/javascript"> </script> 
<script type="text/javascript"> 
Event.observe(window, 'load', function(){ 
    // for all items in the group_first class 
    $$('.father').each(function(chk1){ 
     // watch for clicks 
     chk1.observe('click', function(evt){ 
      dynamicCheckbox(); 
     }); 
    dynamicCheckbox(); 
    }); 
}); 
function dynamicCheckbox(){ 
    // count how many of group_first are checked, 
      // doEnable true if any are checked 
    var doEnable = ($$('.father:checked').length > 0) ? true : false; 
    // for each in group_second, enable the checkbox, and 
      // remove the cssDisabled class from the parent label 
    $$('.child').each(function(item){ 
     if (doEnable) { 
      item.enable().up('label').removeClassName('cssDisabled'); 
     } else { 
      item.disable().up('label').addClassName('cssDisabled'); 
     } 
    }); 
}; 
</script> 

</head> 
<body> 
    <fieldset> 
    <legend>First Group</legend> 
    <label><input type="checkbox" value="1" class="father" />Check box 1</label><br /> 
    <label><input type="checkbox" value="2" class="father" checked/>Check box 2</label> 
</fieldset> 

<fieldset> 
    <legend>Second Group</legend> 
    <label class="cssDisabled"><input type="checkbox" value="x" class="child" disabled="disabled" />Check box x</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="y" class="child" disabled="disabled" />Check box y</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="z" class="child" disabled="disabled" />Check box z</label> 
</fieldset> 
    <fieldset> 
    <legend>First Group</legend> 
    <label><input type="checkbox" value="3" class="father" />Check box 1</label><br /> 
</fieldset> 

<fieldset> 
    <legend>Second Group</legend> 
    <label class="cssDisabled"><input type="checkbox" value="x" class="child" disabled="disabled" />Check box x</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="y" class="child" disabled="disabled" />Check box y</label><br /> 
    <label class="cssDisabled"><input type="checkbox" value="z" class="child" disabled="disabled" />Check box z</label> 
</fieldset> 
</body> 
</html>

Source

2010-05-07 BoDiE2003

Je ne sais pas exactement quelle fonctionnalité vous voulez mais si vous seulement veulent des actions à appliquer à un ensemble puis donner à chaque ensemble leur propre classe peut-être quelque chose comme père1 et enfant1 et père2 et enfant2 – Jack

Peut-être, mais il y a où je suis coincé, je veux faire le code JS dynamique, pour vérifier automatiquement le père et les identifiants des enfants et les lier. Ajouter un numéro d'identification aux classes c'est une bonne idée. Si quelqu'un me donnait un petit exemple, cela m'aiderait, merci. – BoDiE2003

Si vous utilisiez jQuery au lieu de prototype.js, vous auriez obtenu des tonnes de réponses maintenant. –

Je ne suis pas tout à fait sûr de l'effet que vous voulez, mais voici les grandes règles. Vous avez besoin de quelque chose dans votre HTML pour dire à votre js qui devrait affecter lequel. Les attributs sont meilleurs, soit rel ou id ou, plus simple, class.

Donc, attribuez à chaque .father un identifiant qui lui est propre parmi .father s.

<input type="checkbox" value="2" class="father" id="foo"> 
<input type="checkbox" value="3" class="father" id="bar">

Puis donner aux enfants des classes correspondantes/identiques.

<input type="checkbox" value="1" class="child foo"> 
<input type="checkbox" value="2" class="child bar">

(Soit dit en passant, vous ne l'utilisez XHTML, de sorte que vous ne avez pas besoin des barres obliques de fuite.) Sais

Je ne suis pas Prototype, mais ce que vous devez alors faire est, pour chaque .father, prenez la id (#foo et #bar ci-dessus) et de chercher toutes les cases avec les classes .childet soit .foo ou .bar, selon. (Vous pouvez retirer ce dernier bit en stockant le id dans une variable, et en modifiant le texte à ajouter à la période et en faire une classe.)

Source

2010-05-08 07:02:01

Pouvez-vous écrire un exemple ici? – BoDiE2003

Javascript: case à cocher Dynamic (Fieldset avec les cases à cocher père/enfant)

Répondre

Questions connexes