Question

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

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

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

由于你有一个工作解决方案，你可能对这个解决方案不感兴趣，但我挑战自己稍微改进初始代码。我不想仅仅在所有内容上调用change并且感到满意，而是希望使您的代码每个要支持的复选框不需要近10行代码。

这个小提琴包含jQuery的扩展，它将强制执行唯一性，保留动画并允许可重用性（在某种程度上 - 鉴于它要求您使用ul，它并不完美。）

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

至少，请看看今天另一个新的东西:)

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

Answer 2

添加

 $("#itemList").empty();

点击功能

中的

<强> JSFIDDLE DEMO

Answer 3

问题是您以编程方式设置已检查状态，但它未触发您需要在之后触发更改事件的更改事件。致电.trigger('change');

have a look at your updated fiddle

Answer 4

而不是附加，在BlackOlives-Half和BlackOlives-Full中提供html作为条件

DEMO HERE

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

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

4 个答案: