Script

jQuery(function($){
    $('li','ul').click(function(){
        var num = $(this).index();
        $(this).hide().attr('class','off').parent().siblings('ul').children().eq(num).show().attr('class','on');
        $('input').eq(num).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