Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    59
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Inserting labels into divs using checkboxes

    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.
    Last edited by AzzyDude24601; 06-20-2012 at 03:09 PM. Reason: Spelling.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,899
    Thanks
    56
    Thanked 542 Times in 539 Posts
    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>
    Last edited by xelawho; 06-21-2012 at 04:38 AM.

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    59
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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!
    Last edited by AzzyDude24601; 06-21-2012 at 06:24 PM. Reason: Forgot something...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •