求助：如何获取选中复选框的文本？现有JavaScript代码失效

我来帮你排查代码不工作的原因～

问题出在哪？ #

看你的HTML结构，每个复选框<input>是嵌套在<label class="checkbox">标签里面的：

<label class="checkbox">
  <input name="13[]" value="Item 1" type="checkbox">Item 1
</label>

这里<input>的下一个兄弟节点是文本节点（就是"Item 1"这段内容），而不是你代码里找的<label>元素。所以$(this).next("label")根本匹配不到任何元素，自然拿不到选中项的文本。

修正后的代码 #

这里有两种可靠的写法：

方法1：通过父级label获取文本

利用<input>的父元素就是包含目标文本的<label>，直接获取父元素的文本内容：

var checktext = $('#13 input:checkbox:checked').map(function() {
  // 获取父label的文本，去掉前后空格，再替换空格为%20
  return $(this).parent("label").text().trim().replace(/\s+/g, '%20');
}).get();

方法2：直接获取相邻的文本节点

跳过jQuery，直接访问DOM节点的下一个兄弟文本节点：

var checktext = $('#13 input:checkbox:checked').map(function() {
  // 获取input的下一个文本节点内容，处理空格
  return this.nextSibling.nodeValue.trim().replace(/\s+/g, '%20');
}).get();

额外优化说明 #

我把split(' ').join('%20')换成了replace(/\s+/g, '%20')，这样可以处理多个连续空格的情况，比原写法更健壮；同时加上.trim()是为了去掉文本前后可能存在的空白字符。

内容的提问来源于stack exchange，提问作者Cyfer