Question

I need to get the text from the selected checkboxes in a form. Ifhe form is:

<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>

Using Prototype: How can I get the string “Number One\nNumberThree” should these be selected ?

To test something I tried:

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

But I’m getting “s is undefined” in firebug.

Thanks

Answer 1

First of all, you should be using <label> tags on that checkbox text. This is an accessibility concern. Using labels has the added benefit of being able to click the label text to check the box, which is something that many users (myself included) have grown accustomed to…

<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>

As an additional benefit, this makes your code a lot easier…

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