Question

我需要从表单中选中的复选框中获取文本。如果形式是：

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

使用Prototype：如果选择这些字符串，我如何获得字符串“Number One \ nNumberThree”？

测试我试过的东西：

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

但我在萤火虫中得到“未定义”。

由于

Answer 1

首先，您应该在该复选框文本上使用<label>标记。这是一个可访问性问题。使用标签还有一个额外的好处，就是能够点击标签文本来勾选方框，这是很多用户（我自己也包括在内）已经习以为常的东西......

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

作为额外的好处，这使您的代码更容易......

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

Answer 2

你正在寻找李的innerHTML，而不是输入。

你可以做两件事：

1，但不是那么美丽：

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

2，将文本包装在额外的div中

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

然后

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

从Prototype中选中的复选框获取innerHTML文本

2 个答案: