Getting innerHTML text from selected checkboxes in Prototype
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
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)
});
You´re looking for the li´s innerHTML, not the input´s.
Heres two things you could do:
1, but not so beautiful:
$$('li.litemd').pluck('checked').each(function(s) {
alert(s.up().innerHtml.split('/>')[1])
});
2, wrap the text in extra divs
<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>
and then
$$('li.litemd').pluck('checked').each(function(s) {
alert(s.next().innerHTML)
});
精彩评论