Question

Possible Duplicate:
How do I select text nodes with jQuery?

I am trying to move the data that is in the text node adjacent to a checkbox on the selection of the checkbox. I am using jquery. The methods I have tried are listed below with the results I received.

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

Answer 1

Consider having this markup instead

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

or this:

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

Thus you kill two birds with one stone: a) your markup is far semantically better and b) you can access the label elements content via the .text() method.

The first variant can be seen here: http://jsfiddle.net/skip405/DjWcg/