Question

我在表单上有几个复选框，如下所示：

 <div id="checkboxlist" style="display:none;">
<ul class="checkboxlist_list">
<li><input type="checkbox" class="checkbox keys" name="keys" value="150" />Keys<br></li>
<li><input type="checkbox" class="checkbox elec_guit" name="elec_guit" value="150" />Electric Guitar<br></li>
<li><input type="checkbox" class="checkbox acou_guit" name="acou_guit" value="150" />Acoustic Guitar<br></li>
<li><input type="checkbox" class="checkbox bass" name="bass" value="150" />Bass<br></li>
<li><input type="checkbox" class="checkbox drums" name="drums" value="150" />Drums<br></li>
</ul>
</div>

当用户选中这些复选框时，我希望它的文本显示在我页面底部的“摘要”div中。即它会说：你选择了Keys，Electric Guitar，Bass ......例如。

这是我当前的jQuery代码：

var musicians = '';
$('.checkbox:checked').each(function(){        
    var musicianTypes = $(this).text();
    musicians += musicianTypes;
});
$(".summary_musicians").html(musicians);

目前，这不会返回任何值。有谁能告诉我如何解决这个问题？

Answer 1

您应该更改HTML以使用<label>元素（一般的好习惯）：

<input type="checkbox" class="checkbox keys" name="keys" id="keys" value="150" /><label for="keys">Keys</label>

然后，通过

获取文本

var musicianTypes = $(this).next().text();

小提琴：http://jsfiddle.net/7r2pV/

更新：.next（）是一种简单的方法，但如果你真的想做得对，你应该找到带有匹配“for”属性的标签。像这样的东西：

var musicianTypes = $("label[for=" + $(this).attr("id") + "]").text();

Answer 2

<强> jsFiddle

$(".summary_musicians").html(function() {
    return $('.checkbox:checked').map(function() {
               return this.nextSibling.nodeValue;
           }).get().join();
});

Answer 3

您不是在寻找输入文本，而是在输入后查找文本节点。由于您的输入位于列表项中，因此您可以获取父文本：

var musicians = ''; $('.checkbox:checked').each(function(){ var musicianTypes = $(this).parent().text(); musicians += musicianTypes; });

$(this).closest('li')也有效

jQuery在一个范围内选中复选框后显示文本

3 个答案: