Question

So I’ve got this tricky (at least for me) script to write/modify. You can see below how it looks right now:

HTML:

<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>
<div class="holder" style="float: left; margin-right: 20px; clear: right">
    <input type=checkbox class="checkbox" checked="checked" />
    <h2>Lorem ipsum</h2>
</div>

<div class="number">
    0
</div>

Javascript:

var increment2=1; 
        $('.checkbox').live('click', function() { 
        $('.number').html( '(' + increment2 + ')'); 
        increment2++; 
    })

http://jsfiddle.net/P3zMu/13/

What needs to be done is that when you check on of the boxes the h2 content of the container should appear in the ul as li. If there are 3 boxes checked, than in the ul will be 3 li etc… when you uncheck the box it’s ofcourse being removed from the ul.

I hope my explanation is making sens. Can anyone help?

Answer 1

I made few minor changes to your html and implemented below code,

DEMO here

var increment2 = 1;

$('.checkbox').on('click', function() {
    $('.number').html('(' + increment2 + ')');
    increment2++;

    var $div = $(this).parent('div').get(0);

    if ($(this).is(':checked')) {        
        $('#selected_items').append('<li selected-item="' + $div.id + '_selected">' + $($div).find('h2').text() + '</li>');
    } else {
        $('#selected_items > li[selected-item^="' + $div.id + '"]').remove();
    }
});