访问Checkboxes旁边的文本节点,JQuery

时间:2012-04-22 18:33:36

标签: jquery html nodes

  

可能重复:
  How do I select text nodes with jQuery?

我正在尝试将文本节点中的数据移动到选中复选框的复选框旁边。我正在使用jquery。我尝试过的方法在下面列出了我收到的结果。

<input class="item" type="checkbox" /> Category 1
<input class="item" type="checkbox" /> Category 2


<script>
  $('.item').click(function(){
      if($(this).attr('checked'))
      {
         $('#list').append("<span>" + $(this).next() + "<span><br/>")
         //$(this).next() just writes "[object Object]"
         //$(this).next().text() doesn't write anything
         //Also tried $(this).nextSibling.nodeValue but throws "Cannot access property of undefined"
      }
      else
      {
          //This is remove the item from the list on uncheck 
      }
  });
</script>

1 个答案:

答案 0 :(得分:0)

考虑使用此标记

<input class="item" type="checkbox" id="cat_one" name="cat_one" /> <label for="cat_one">Category 1</label>
<input class="item" type="checkbox" id="cat_two" name="cat_two"/> <label for="cat_two">Category 2</label>

或者这个:

<label for="cat_one"><input class="item" type="checkbox" id="cat_one" name="cat_one" /> Category 1</label>
<label for="cat_two"><input class="item" type="checkbox" id="cat_two" name="cat_two"/> Category 2</label>

因此,你一举两得:a)你的标记在语义上更好; b)你可以通过label方法访问.text()元素内容。

第一个变体可以在这里看到:http://jsfiddle.net/skip405/DjWcg/