Установите флажок в качестве переключателя и добавьте удалить значения на флажок Снимите флажок

Я хочу, чтобы флажки работали как переключатели и одновременно добавляли и удаляли данные при проверке и сняли отметку соответственно.

То, что я получил, отлично работает, когда проверяется только один флажок, но не работает, когда я проверяю оба. Проблема в том, что после проверки 1-го флажка, когда я проверяю второй ящик, 1-й не снят, но значение 1-го не удаляется из списка.

Вот скрипка: http://jsfiddle.net/uZvMA/

JavaScript:

var $unique = $('input.unique');
$unique.click(function() {
    $unique.filter(':checked').not(this).removeAttr('checked');

});    

$("#BlackOlives-Half").change(function() {
    // If checked
    var value = $(this).val(),
        $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.append("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
        //hide to the right
        $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
            $(this).remove();
        });
    }
});
$("#BlackOlives-Full").change(function() {
    // If checked
    var value = $(this).val(),
        $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.append("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
        //hide to the right
        $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
            $(this).remove();
        });
    }
});     

HTML:

<ul>
    <li><div id="BlackOlives-Half10">Black Olives</div>
        <div class="radioButtons">
        <input type="checkbox" id="BlackOlives-Half" onchange="" class='unique' name="BlackOlives" value="5" /> <label for="BlackOlives-Half">Half</label>
        <input type="checkbox" id="BlackOlives-Full" onclick="" class='unique' name="BlackOlives" value="10" /> <label for="BlackOlives-Full">Full</label>
        </div>

    </li>

</ul>
<ul id="itemList"></ul>