2009-10-18 5 views
0

Hé les gars, j'essaie de faire un petit ajout à une application web que j'utilise. En ce moment j'essaie de vérifier toutes les cases sur la page qui ont la classe .checkBox (Dans le cas où il est nécessaire de différencier/sélectionner). Les cases à cocher sont des descendants de divs de classe .someClass, c'est juste qu'il y a beaucoup de divs qui ont cette classe. Je veux vérifier les boîtes qui sont des descendants de divs dont la classe est seulement.someClass.Prototype Sélection Aide

En d'autres termes:

<!-- Check this box --> 
<div class="someClass"> [...] <input type="checkbox" class="checkBox" /></div> 

<!-- But not this one --> 
<div class="someClass otherClasses lolWut"> [...] <input type="checkbox" class="checkBox" /></div> 

Rappelez-vous, les cases à cocher ne sont pas des enfants directs, mais les descendants.

Merci, je serais reconnaissant de toute aide :)

Répondre

3

Ici, vous allez:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

    <title>Check the boxes</title> 
    <script src="prototype.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
    function checkThem() { 
     // get all the .someClass divs 
     $$(".someClass").each(function(item) { 
     // filter out the ones that have additional classes 
     if(item.className == 'someClass') { 
      // get the .checkBox descendants 
      item.select('.checkBox').each(function(checkbox) { 
      // check them 
      checkbox.checked = true; 
      }); 
     } 
     }); 
    } 
    </script> 

</head> 

<body> 

    <!-- Check this box --> 
    <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div> 

    <!-- But not this one --> 
    <div class="someClass otherClasses lolWut">Don't check: <input type="checkbox" class="checkBox" /></div> 

    <!-- Check this box --> 
    <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div> 

    <br /><br /> 

    <a href="#" onclick="checkThem(); return false;">Check them.</a> 

</body> 
</html> 
+0

J'ai testé votre code dans un fichier html séparé et cela a fonctionné! Cependant, j'ai du mal à l'utiliser sur le projet que j'utilise. Je reçois toujours une erreur dans Firebug "Une chaîne invalide ou illégale a été spécifiée" code: "12" suivi de "results = $ A (root.querySelectorAll (e)). Map (Element.extend); \ n", et rien arrive (aucune case n'est cochée). Les cases à cocher sont des descendants, pas des enfants directs, c'est pour ça? J'utilise prototype.js 1.6.1 –

+0

Peu importe qu'ils soient des descendants (j'ai testé en cochant les cases dans d'autres éléments). Je testais aussi avec prototype.js 1.6.1. Quels sont les noms de classe réels en question? Comme ce sont les seules chaînes, cela peut être la source du problème (par exemple, si ce sont des noms de classe invalides). –

+0

En fait, ne tenez pas compte de l'autre message. J'avais mis à jour le prototype au prototype 1.6.1 (juste le fichier js), et pour une raison quelconque, je pensais que je reviendrais pour voir si cela résoudrait le problème, et c'est ce que j'ai fait. Peut-être que cette application web cache quelque chose, je ne sais pas. Je cours maintenant sur 1.6.0.2, mais au moins cela fonctionne. Je vais essayer de comprendre pourquoi cela n'a pas fonctionné avec 1.6.1 plus tard. En attendant, merci pour votre solution, fonctionne à merveille. –