Inserting labels into divs using checkboxes

AzzyDude24601 · 06-20-2012, 03:08 PM

Hello, I have this long list of checkboxes in a form with specific labels that look something like this:

Code:

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

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

<input type='checkbox' name='check[]' id='161' value='161' />
<label for='161'>Person 3</label><br /><br />

And below this list I have six div's like so:

Code:

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

I have 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:

Code:

$(function(){
    $('input:checkbox').click(function(){
       var id = $(this).attr('id');
        if($(this).is(':checked')){
            $('#member1').text($('label[for="'+ id +'"]').text());
        }
        else{
            $('#member1').text('');   
        }
    });
});

So the problem is the function currently has to specify which div to put it into (#member1). It's supposed to work that when the first div is "full", the next checkbox will insert its label into the second div, and when that one is full, the third checkbox will insert its label into the third div, etc.

Also if a checkbox becomes unchecked, its label should be removed from its div and the labels in the divs below it should move up. Anyone know if that's possible? I'll accept any help at all.

xelawho · 06-20-2012, 10:59 PM

you can't have id's that start with a number. but you don't need to anyway. this seems to work...

Code:

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

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

<input type='checkbox' name='check[]' id='cb161' value='161' />
<label for='cb161'>Person 3</label><br /><br />

<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>
<script type="text/javascript"> 
$(function(){
    $('input:checkbox').click(function(){
	var theid=$(this).attr("id")
        if($(this).is(':checked')){
		$('.member').each(function(){
		if ($(this).text()==''){
            $(this).text($('label[for="'+ theid +'"]').text());
        return false;
				}
			});
		}
	else {
	$('.member').each(function(){
	if ($(this).text()==($('label[for="'+ theid +'"]').text())){
            $(this).text('');
        return false;
				}
			});	
		}
    });
});
</script>
</body>

AzzyDude24601 · 06-21-2012, 06:23 PM

Thank you for your answer. Unfortunately I had to scrap the whole idea and try a new way as I didn't have time to wait.

(By the way this is a private web app being constructed in HTML5. So id's can indeed start with a number.)

Thanks again!