Obtention du texte innerHTML à partir des cases à cocher sélectionnées dans le prototype

Question

Je dois récupérer le texte des cases cochées dans un formulaire. FIEF forme est:

<form action="save" method="post" name="reunform" id="reunform" > 
<div id="listad"> 
    <ul id="litemsd"> 
    <li class="litemd"><input type="checkbox" name="d1" />Number One</li> 
    <li class="litemd"><input type="checkbox" name="d2" />Numer Two</li> 
    <li class="litemd"><input type="checkbox" name="d3" />Numer Three</li> 
    </ul> 
</div> 
... 
</form> 

En utilisant Prototype: Comment puis-je faire si celles-ci sélectionner la chaîne "Number One \ nNumberThree"?

Pour tester quelque chose que j'ai essayé:

$$('li.litemd').pluck('checked').each(function(s) { 
    alert(s.innerHtml) 
    }); 

Mais je suis en train de "s est indéfini" dans Firebug.

Merci

Answer 1

Tout d'abord, yo Vous devriez utiliser <label> étiquettes sur ce texte de case à cocher. C'est un problème d'accessibilité. L'utilisation d'étiquettes a l'avantage supplémentaire d'être en mesure de cliquer sur le texte de l'étiquette de cocher la case, qui est quelque chose que beaucoup d'utilisateurs (dont moi-même) se sont habitués à ...

<ul id="litemsd"> 
    <li class="litemd"> 
    <input type="checkbox" id="d1" name="d1" /> 
    <label for="d1">Number One</label> 
    </li> 
    <li class="litemd"> 
    <input type="checkbox" id="d2" name="d2" /> 
    <label for="d2">Numer Two</label> 
    </li> 
    <li class="litemd"> 
    <input type="checkbox" id="d3" name="d3" /> 
    <label for="d3">Numer Three</label> 
    </li> 
</ul> 

Comme un avantage supplémentaire, ce qui rend votre code beaucoup plus facile ...

$$('li.litemd input:checked').each(function(s) { 
    alert(s.next().innerHTML) 
}); 

Answer 2

recherche des Trovit facilite li's innerHTML, pas les input's.

Heres deux choses que vous pouvez faire:

1, mais pas si belle:

$$('li.litemd').pluck('checked').each(function(s) { 
    alert(s.up().innerHtml.split('/>')[1]) 
}); 

2, envelopper le texte dans divs supplémentaires

<li class="litemd"><input type="checkbox" name="d1" /><div>Number One</div></li> 
<li class="litemd"><input type="checkbox" name="d2" /><div>Numer Two</div></li> 
<li class="litemd"><input type="checkbox" name="d3" /><div>Numer Three<div></li> 

puis

$$('li.litemd').pluck('checked').each(function(s) { 
    alert(s.next().innerHTML) 
});