Showing val as html inside of a div in real time.

Question

I'm using the following in order to have on screen display of each value of a checkbox that's selected with great results when it's displayed inside a textbox. I'd like to change it so that I can show a real time display in a div as html instead of a textbox.

A link to a working demo is here and below is the script. I know it's probably a basic line or two but i'm still learning and new. thanks!

function updateTextArea() {         
    var allVals = [];
    $('#c_b :checked').each(function() {
        allVals.push($(this).val());
    });
    $('#t').val(allVals)
}
$(function() {
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

Answer 1

Use the following to append the vals to a div, or you could append each val within your loop to the div.

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

or change your loop to this:

$('#c_b :checked').each(function() {
        allVals.push($(this).val());
        $('div').append($(this).val());
    });

Answer 2

$('input[type=checkbox]').click(function(){
    var $self = $(this);

    if ( $self.is(':checked') )
        $('#target-div').append('<p>' + $self.val() + '</p>');

    else
        $('p').remove(':contains("' + $self.val() + '")');
});

Answer 3

You pretty much got all the code needed, just two small changes (one obvious one and the other is slightly less obvious).

Instead of a text box, use this:

<div id="d"></div>

Change $('#t').val(allVals); to $('#d').html(allVals.toString()); (I've added a semi-colon for formatting.) You can use .text instead of .html but since you mentioned HTML in your question, I thought that would be more appropriate.

That's it. Althought I might use .focus instead of .click. This should work too.

Here's the demo on jsbin.