jquery append div can't show output

开发者_StackOverflow社区

Jquery

function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
      $('#textarea').val(allVals)
      $('#div').append(allVals)
}

Why textarea success show the output but div fail to show the output?

---

Because you can't append an array variable to an element and expect a string to be added as the content of the element without giving it string content to append. Use this instead:

<div id="c_b">
    <input type="checkbox"/> 1
    <input type="checkbox"/> 2
    <input type="checkbox"/> 3
    <input type="checkbox"/> 4
</div>
<input type="button" onclick="updateTextArea()" value="update text"/>
<textarea id="textarea"></textarea>
<div id="div"></div>

function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
      $('#textarea').val(allVals);
      $('#div').append(allVals.join(',')); // <<< Notice this line, with .join() added
}

http://jsfiddle.net/userdude/LWU8y/

---

Try changing it from:

$('#div').append(allVals);

to:

$('#div').text(allVals);