CODEWITHSUNDEEP
javascriptjquerycheckbox
David Trinh
David Trinh

Reputation: 289

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

I am trying to have my checkbox unchecked after someone confirms the removal of the items. Would like to know how I go about doing so? Hope someone can help me with this.

Here is my code:

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>

Upvotes: 0

Views: 142

Answers (2)

guradio
guradio

Reputation: 15555

$(".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);
    };
});

FIDDLE

Use attr checked and set it to false or use prop

Upvotes: 1

KAD
KAD

Reputation: 11102

Use prop to uncheck the checkbox : $("#select-all").prop("checked",false); You can define any selector you need.

$(".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>

Upvotes: 2

Related Questions