Question

修改一些旧代码，并在最后一次添加时需要一些帮助。基本上可以有可变数量的复选框，需要将标签文本添加到任何复选框，并将该文本附加到另一个div。已经重写了很多次并使用了很多其他代码，但似乎没有任何工作。在这里已经看到了几个类似的问题，但没有一个能够解决这个问题。

问题：获取与输入复选框关联的标签文字。然后，一旦收集了该文本值，就将其附加到单独的div中。

注意：复选框的ID和值相同，因为一些不同的代码版本只是试图让它们工作。想要仅使用VALUE的解决方案。

HTML：

<a cid="38" href="javascript:void(0);" class="cat_filter">
  <div class="cat-filter_checkbox">
    <input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
    <label for="38">Category ONE</label>
  </div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
  <div class="cat-filter_checkbox">
    <input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
    <label for="14">Category TWO</label>
  </div>
</a>


 <div id="labelName"></div>

JS：

$(".cat_filter").live('click', function() {
    $(this).find("input:checkbox").attr("checked", true);
    var labelName = $(this).find("label[for='"+$(this).attr("id")+"']").text();        
    labelName.appendTo('#labelName');        
});

小提琴： http://jsfiddle.net/wfuller/o25z9w0f/1/

非常感谢任何帮助。

Answer 1

所以这应该可以解决你的问题：

$(".cat_filter").on('click','input',function() {
//On click on an input field. if this isn't OK tell me and I will change it again.
       $('#labelName').html($('label[for='+$(this).prop('id')+']').html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a cid="38" href="javascript:void(0);" class="cat_filter">
    <div class="cat-filter_checkbox">
        <input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
        <label for="38">Category ONE</label>
    </div>
</a>
 <a cid="14" href="javascript:void(0);" class="cat_filter">
     <div class="cat-filter_checkbox">
             <input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
             <label for="14">Category TWO</label>
     </div>
</a>
<div id="labelName"></div>

来自维也纳的问候

Answer 2

var nodeList = document.querySelectorAll('input[type ="checkbox"]');
var div = document.getElementById('myDiv');
for (node in nodeList) {
    div.innerHTML += node.text; //or label if you set that attribute on the element
}

不依赖于jQuery

获取复选框的标签文本并附加到div

2 个答案: