How to insert a html label into div using a checkbox?

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?

Ram · Accepted Answer · 2012-06-20 14:22:51Z

2

try this:

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

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

edited Jun 20, 2012 at 14:22

answered Jun 20, 2012 at 11:44

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aadu Over a year ago

That certainly fixed the id problem. But do you know if there's a way to choose #member1 and if #member1 already has a label, choose #member2?

Ram Over a year ago

@AzzyDude yes, that was a typo, try it again.

aadu Over a year ago

Now it's saying "#member1".text is not a function. Adil has the right idea.

Ram Over a year ago

@AzzyDud that was another typo.

Adil · Accepted Answer · 2012-06-20 12:59:07Z

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('');
        }
    });
});

edited Jun 20, 2012 at 12:59

answered Jun 20, 2012 at 12:11

Adil

148k25 gold badges217 silver badges207 bronze badges

6 Comments

aadu Over a year ago

That works! Would it be much more difficult to augment the code so that if you uncheck the checkbox, the name is removed from the div?

Adil Over a year ago

Name from which div should be removed as there are many div and there is not correspondence between checkboxes and divs?

aadu Over a year ago

Hmm, well the idea is that you're making a list out of names. But if you change your mind and want to remove a name from the list (by unchecking the box) the name should just disappear and the names lower down in the list would move up. That make sense?

Adil Over a year ago

I have updated my answer, I hope this is what you want. Please have a look.

aadu Over a year ago

Hey, thanks for getting back to me! I pasted your function in with no errors but now nothing seems to be happening? (How it's working in the fiddle is perfect though!)

|

Miqdad Ali · Accepted Answer · 2012-06-20 11:45:14Z

1

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

answered Jun 20, 2012 at 11:45

Miqdad Ali

6,1577 gold badges34 silver badges50 bronze badges

4 Comments

aadu Over a year ago

That certainly fixed the id problem. But do you know if there's a way to choose #member1 and if #member1 already has a label, choose #member2?

Miqdad Ali Over a year ago

$(".member").each(function(){ if($(this).html() == ""){ $(this).html($('label[for="'+$(this).attr("id")+'"]').text()); exit; } });

Miqdad Ali Over a year ago

replace $('#member1').text($('label[for="'+$(this).attr("id")+'"]').text()); this line by above code

aadu Over a year ago

Hmm, no errors, but now nothing is happening. Adil above got it working though.

Collectives™ on Stack Overflow

How to insert a html label into div using a checkbox?

3 Answers 3

4 Comments

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related