Question

I have this long list of checkboxes with specific labels that look something like this:

<input type='checkbox' name='check[]' id='159' value='159' />
<label for='159'>Person 1</label>

<input type='checkbox' name='check[]' id='160' value='160' />
<label for='160'>Person 2</label>

And below this form I have six div’s like so:

<div id="member1" class="member"></div>
<div id="member2" class="member"></div>
<div id="member3" class="member"></div>
<div id="member4" class="member"></div>
<div id="member5" class="member"></div>
<div id="member6" class="member"></div>

Someone helped me write this JS function so that when I click on a checkbox, it’s label is inserted into the first div. Here’s what it looks like:

$(function(){
$('#159').click(function(){
    if($(this).is(':checked')){
        $('#member1').text($('label[for="159"]').text());
    }
    else{
        $('#member1').text('');   
    }
});
});

The problem is I don’t know how to edit this function to work for any checkbox that’s clicked. Currently it only works on the checkbox with an id of 159. The second problem is the function specifies what div to put it into. The idea is that when the first div is “full”, the next checkbox will insert the label into the second div, and then the third, etc.

Please note that if the checkbox is unchecked, the label is removed from the div, and the labels in the divs below it would have to move up. Anyone know if this is possible?

Answer 1

Try this.

Live Demo

   $(function() {

    $('input[type=checkbox][name=check\[\]]').click(function() {
        chkboxid = $(this).attr('id');
        if ($(this).is(':checked')) {

            $('#member' + eval($(this).index() + 1)).text($('label[for="' + chkboxid + '"]').text());

        }
        else {
            $('#member' + eval($(this).index() + 1)).text('');
        }
    });
});​