Question

所以我创建了一个全选复选框来选择和取消选择我的列表。一切都很好但是当我删除列表时它也会删除全选复选框。请告诉我我做错了什么。这是代码：

HTML：

         <div class="item-list">
                <H2>Shopping List</H2>              
                <ul class="check-list">
                    <li><input type="checkbox" id="select-all"/>Select All</li>
                </ul>
            </div>

jQuery的：

$(document).ready(function(){

    $(".add-btn").click(function (){
        var addItem = $('#item-add').val();
        $(".check-list").append('<li ><input type="checkbox" class="check-box">' + addItem + '</li>');
    });

    $('#select-all').change(function(){
        $('.check-box').prop('checked', $(this).prop('checked'));
    });

    $(".rem-btn").click(function(){
        $(".check-list input:checked").parent().remove();
    });

});

Answer 1

如果要在执行删除操作时排除select-all复选框。 $.fn.not()可用于从$(".check-list input:checked")元素中排除复选框。

从匹配元素集中删除元素。

使用的

$(".check-list input:checked").not('#select-all').parent().remove();

OR，:not selector也可以使用

选择与给定选择器不匹配的所有元素。

$(".check-list input:checked:not(#select-all)").parent().remove();

Answer 2

您删除了check-list复选框所在的select-all内的所有内容。虽然Satpals解决方案应该有效，但我认为将Select-All复选框放在检查列表之外会更好。

    <div class="item-list">
            <H2>Shopping List</H2>              
            <input type="checkbox" id="select-all"/> <label for="select-all">Select All</label>
            <ul class="check-list"></ul>
    </div>

您不需要更改任何脚本，也不需要为这样的基本任务复杂选择器和排除项。

使用.prop（）创建“全选”复选框，但不要删除该复选框

2 个答案: