单击删除按钮后,希望取消选中复选框

After remove button is clicked would like the checkbox to go unchecked

本文关键字:取消 复选框 希望 删除 按钮 单击      更新时间:2023-09-26

在有人确认删除项目后,我正试图取消选中我的复选框。想知道我是怎么做的吗?希望有人能帮我。

这是我的代码:

JS:

$(".rem-btn").click(function(){
        var remConf = confirm("Are you sure you want to remove these items from your shopping list?");
        if (remConf == true) {
            $(".check-list input:checked").not('#select-all').parent().remove();
        };
});

HTML:

<section class="shop-list">
            <div class="add-item">
                <input id="item-add" type='text' placeholder="Enter item to shopping list..." name="itemAdd"></input>
                <button class="add-btn">Add Item</button>
            </div>
            <div class="item-list">
                <h2>Shopping List</h2>              
                <ul class="check-list">
                    <li><input type="checkbox" id="select-all"/>Select All</li>
                </ul>
            </div>  
            <div class="removal">
                <button class="rem-btn">Remove Selected</button>
            </div>
        </section>

使用prop取消选中复选框:$("#select-all").prop("checked",false);您可以定义任何需要的选择器。

$(".rem-btn").click(function(){
        var remConf = confirm("Are you sure you want to remove these items from your shopping list?");
        if (remConf == true) {
            $(".check-list input:checked").not('#select-all').parent().remove();
          $("#select-all").prop("checked",false);
        };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="shop-list">
            <div class="add-item">
                <input id="item-add" type='text' placeholder="Enter item to shopping list..." name="itemAdd"></input>
                <button class="add-btn">Add Item</button>
            </div>
            <div class="item-list">
                <h2>Shopping List</h2>              
                <ul class="check-list">
                    <li><input type="checkbox" id="select-all"/>Select All</li>
                </ul>
            </div>  
            <div class="removal">
                <button class="rem-btn">Remove Selected</button>
            </div>
        </section>

$(".rem-btn").click(function () {
    var remConf = confirm("Are you sure you want to remove these items from your shopping list?");
    if (remConf == true) {
        console.log('qeqw');
        $(".check-list input:checked").attr('checked',false);
    };
});

小提琴

使用已检查的attr并将其设置为false或使用prop