0

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

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

这是小提琴：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>
4

4 回答 4

2

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

这个小提琴包括一个 jQuery 的扩展，它将强制唯一性，保留你的动画，并允许可重用​​性（在某种程度上——它并不完美，因为它要求你使用ul.）

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

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

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

于 2013-09-20T06:00:17.990 回答
1

只需添加

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

在您的点击功能中

JSFIDDLE 演示

于 2013-09-20T05:38:03.617 回答
0

问题是您正在以编程方式设置选中状态，但它没有触发您需要在之后触发更改事件的更改事件。通过调用.trigger('change');

看看你更新的小提琴

于 2013-09-20T05:36:50.700 回答
0

而不是追加，在 if 条件下在 BlackOlives-Half 和 BlackOlives-Full 中作为 html 给出

在这里演示

$("#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();
    });
}
});
于 2013-09-20T05:38:52.543 回答