...

View Full Version : 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:




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




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




$(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...



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum