Script

jQuery(function($){
    $('li','ul').attr('name',function(){
        return 'list-' + $(this).index();
    });
    $('input').addClass(function(){
        return 'list-' + $(this).index();
    });
    $("li",'ul').click(function(){
        var self = $(this);
        var name = self.attr('name');
        $('[name='+name+']').not(self).appendTo(self.parent().siblings('ul').last()).show().attr('class','on');
        self.attr('class','off').hide();    
        $('input.'+name).attr('checked',function(){
            if(this.checked){
                return '';
            } else {
                return 'checked';
            };
        });
    });
});

HTML

<ul class="add">
<li class="off"><img src="images/A1.png" width="108" height="43" alt="選択A" /></li>
<li class="on"><img src="images/B1.png" width="108" height="43" alt="選択B" /></li>
<li class="on"><img src="images/C1.png" width="108" height="43" alt="選択C" /></li>
<li class="on"><img src="images/D1.png" width="108" height="43" alt="選択D" /></li>
<li class="on"><img src="images/E1.png" width="108" height="43" alt="選択E" /></li>
</ul>

<ul class="delete">
<li class="on"><img src="images/A2.png" width="108" height="43" alt="選択A" /></li>
<li class="off"><img src="images/B2.png" width="108" height="43" alt="選択B" /></li>
<li class="off"><img src="images/C2.png" width="108" height="43" alt="選択C" /></li>
<li class="off"><img src="images/D2.png" width="108" height="43" alt="選択D" /></li>
<li class="off"><img src="images/E2.png" width="108" height="43" alt="選択E" /></li>
</ul>

<input type="checkbox" name="test" value="選択A" checked="checked" />
<input type="checkbox" name="test" value="選択B" />
<input type="checkbox" name="test" value="選択C" />
<input type="checkbox" name="test" value="選択D" />
<input type="checkbox" name="test" value="選択E" />

Demo