Undefined variable in array in prototype

Question

Hi, I have the following code:

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

And inside the form's submit observe function I try to iterate over the selected checkboxes:

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

But whe that code is reached, the following error pops up in firebug:

"s is undefined"

Any hints ?

Answer 1

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

?

Answer 2

.pluck() returns an array of values (whatever property name you passed in), so it's not filtering your results to the checked ones, it's literally returning a [false, false, false] array.

Instead I think you want this:

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

You can give it a try here, note the addition of input to the selector, since you're cheking on the property of the <input> inside the <li>, not on the <li> itself.

Answer 3

I think you're confusing the properties which pluck() works on with HTML attributes. It's anyway easier to add the pseudo class of checked as part of the initial selector, like:

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

Example