0

我在一个看起来像这样的表单上有几个复选框：

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

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

4

3 回答 3

4

您应该更改您的 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();
于 2013-09-10T17:27:37.687 回答
3

jsFiddle

$(".summary_musicians").html(function() {
    return $('.checkbox:checked').map(function() {
               return this.nextSibling.nodeValue;
           }).get().join();
});
于 2013-09-10T17:25:58.180 回答
1

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

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

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

于 2013-09-10T17:25:21.433 回答