How can I get this list of checkboxes to be added to a div prior to their selected state, so if they are selected, they should be added to the div, if not they are removed from the list if not selected.

<div id="selected-people"></div>

<input type="checkbox" value="45" id="Jamie" />
<input type="checkbox" value="46" id="Ethan" />
<input type="checkbox" value="47" id="James" />
<input type="checkbox" value="48" id="Jamie" />
<input type="checkbox" value="49" id="Darren" />
<input type="checkbox" value="50" id="Danny" />
<input type="checkbox" value="51" id="Charles" />
<input type="checkbox" value="52" id="Charlotte" />
<input type="checkbox" value="53" id="Natasha" />

Is it possible to extract the id name as the stored value, so the id value will be added to the div instead of the value - the value needs to have the number so that it gets added to a database for later use.

I looked on here, there is one with checkboxes and a textarea, I changed some parts around, doesn't even work.

function storeuser() 
{         
    var users = [];

    $('input[type=checkbox]:checked').each(function() 
    {
        users.push($(this).val());
    });

    $('#selected-people').html(users)
}

$(function() 
{
    $('input[type=checkbox]').click(storeuser);
    storeuser();
});

How can I get this list of checkboxes to be added to a div prior to their selected state, so if they are selected, they should be added to the div, if not they are removed from the list if not selected.

<div id="selected-people"></div>

<input type="checkbox" value="45" id="Jamie" />
<input type="checkbox" value="46" id="Ethan" />
<input type="checkbox" value="47" id="James" />
<input type="checkbox" value="48" id="Jamie" />
<input type="checkbox" value="49" id="Darren" />
<input type="checkbox" value="50" id="Danny" />
<input type="checkbox" value="51" id="Charles" />
<input type="checkbox" value="52" id="Charlotte" />
<input type="checkbox" value="53" id="Natasha" />

Is it possible to extract the id name as the stored value, so the id value will be added to the div instead of the value - the value needs to have the number so that it gets added to a database for later use.

I looked on here, there is one with checkboxes and a textarea, I changed some parts around, doesn't even work.

function storeuser() 
{         
    var users = [];

    $('input[type=checkbox]:checked').each(function() 
    {
        users.push($(this).val());
    });

    $('#selected-people').html(users)
}

$(function() 
{
    $('input[type=checkbox]').click(storeuser);
    storeuser();
});

• javascript
• jquery

• I don't really understand what you're asking. Do you want the ID or the VALUE added to the DIV when items are selected? And what do you mean by "prior to their selected state"? Also, can you post what you've tried that isn't working? – user1921 Commented Sep 6, 2010 at 0:29
• Added the code i saw on stackoverflow, changed it but doesn't work at all. The ID should be stored in the div. – MacMac Commented Sep 6, 2010 at 0:32
• 1 You have 2 IDs that are the same "Jamie". This is not valid HTML and can cause trouble for you. – user113716 Commented Sep 6, 2010 at 0:45

4 Answers 4

So you want to keep the DIV updated whenever a checkbox is clicked? That sound right?

http://jsfiddle/HBXvy/

var $checkboxes;

function storeuser() {         
    var users = $checkboxes.map(function() {
        if(this.checked) return this.id;
    }).get().join(',');
    $('#selected-people').html(users); 
}

$(function() {
    $checkboxes = $('input:checkbox').change(storeuser);
});​

Supposing you only have these input controls on page I can write following code.

$.each($('input'), function(index, value) {
    $('selected-people').append($(value).attr('id'));
});

Edited Due to More Description

$(document).ready(function() {
    $.each($('input'), function(index, value) {
         $(value).bind('click', function() {
             $('selected-people').append($(value).attr('id'));
         });
    });
});

Note: I am binding each element's click event to a function. If that doesn't work or it isn't a good for what you are supposed to do then change it to on "change" event.

Change:

users.push($(this).val());

to:

users.push($(this).attr('id'));

This is for to bind the ma seperated values to input checkbox list

$(".chkboxes").val("1,2,3,4,5,6".split(','));

it will bind checkboxes according to given string value in ma seperated.