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"></div>
<div id="member2"></div>
<div id="member3"></div>
<div id="member4"></div>
<div id="member5"></div>
<div id="member6"></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 one 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.

The other issue is 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 help for either problem!

Answer 1

Caveat: I would do this completely differently.

But using your current structure: Live copy | source (using valid ids)

$(function(){
    $('input:checkbox').click(function(){
        var $cb = $(this),
            id  = this.id, // No need for `attr`
            member,
            prev;
        if(this.checked){  // No need for `attr`
            $("div[id^=member]").each(function() {
                if (!this.firstChild) {
                    // It's empty, use it
                    $(this).text($('label[for="'+ id +'"]').text()).attr("data-contents", id);
                    return false; // Done
                }
            });
        }
        else {
            member = $('div[data-contents="' + id + '"]');
            if (member[0]) {
                member.empty().removeAttr('data-contents');
                prev = member[0];
                member.nextAll().each(function() {
                   if (!this.firstChild) {
                       return false; // Done
                   }
                   prev.appendChild(this.firstChild);
                   prev = this;
                });
            }
        }
    });
});

Minimum changes I would make:

• Put the #memberX divs in a container so we don’t have to do the id^= search.
• Don’t use id values on the #memberX divs at all.
• If you don’t absolutely, positively need them, don’t have empty #member divs at all. This would simplify the code markedly.
• If you do need them, when clearing, remove the div and just append a new, empty one to the end.

Example: Live copy | source

HTML:

Just replace the #membersX divs with <div id="members"></div>".

JavaScript:

$(function(){
    $('input:checkbox').click(function(){
        var $cb = $(this),
            id  = this.id; // No need for `attr`

        if(this.checked){  // No need for `attr`
            $("<div>")
                .text($('label[for="'+ id +'"]').text())
                .attr("data-contents", id)
                .appendTo("#members");
        }
        else {
            $('div[data-contents="' + id + '"]').remove();
        }
    });
});

You can simplify even more by moving the checkbox input the labels (which also means you can do away with the for attribute): Live copy | source

HTML:

<label><input type='checkbox' name='check[]' id="x159" value='159' />
  Person 1</label>
<label><input type='checkbox' name='check[]' id="x160" value='160' />
  Person 2</label>
<div id="members"></div>

JavaScript:

$(function(){
    $('input:checkbox').click(function(){
        var id  = this.id; // No need for `attr`

        if(this.checked){  // No need for `attr`
            $("<div>")
                .text($(this.parentNode).text())
                .attr("data-contents", id)
                .appendTo("#members");
        }
        else {
            $('div[data-contents="' + id + '"]').remove();
        }
    });
});