javascript - 复选框作为单选按钮并在选中时添加删除值取消选中

Question

我想让复选框用作单选按钮，同时分别在选中和取消选中时添加和删除数据。

当只选中一个复选框时，我得到的工作正常，但当我同时选中两个复选框时，我得到的工作正常。问题是，在选中第一个复选框后，当我选中第二个复选框时，第一个复选框未被选中，但第一个复选框的值并未从列表中删除。

这是 fiddle :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>

Answer 1

既然您已经有了一个可行的解决方案，您可能对此解决方案不再感兴趣，但我挑战自己对初始代码进行了一些改进。我还想让您的代码不需要为您想要支持的每个复选框添加近 10 行额外代码，而不是仅仅对所有内容调用 change 并感到满意。

这个 fiddle 包括对 jQuery 的扩展，它将强制唯一性，保留动画并允许可重用​​性(在某种程度上 - 它并不完美，因为它要求您使用 ul。)

http://jsfiddle.net/uZvMA/5/

至少，请今天看看并教自己另一件新东西:)

编辑:更新了 JSFiddle，证明它可以在多个实例中工作。 http://jsfiddle.net/uZvMA/6/