change checkbox attr if checkbox is checked in material io

Question

hi i have a button to clear all filters when clicked on, and i want the check boxes that are checked to be unchecked on that button click, the problem i'm facing is i'm using material io and these methods doesn't seem to work on it.

$('#clear-filters').on('click', function () {
    $('input:checkbox').attr('checked',false);
});

or

$("#clear-filters").click(function(){
    $("input:checkbox").removeAttr('checked');

});

and this is the checkbox im using:

<div class="mdc-form-field">
    <div class="mdc-checkbox">
         <input type="checkbox" class="mdc-checkbox__native-control" id="checkbox-1" />
         <div class="mdc-checkbox__background">
             <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                  <path class="mdc-checkbox__checkmark-path" fill="none d="M1.73,12.91 8.1,19.28 22.79,4.59" />
             </svg>
             <div class="mdc-checkbox__mixedmark"></div>
         </div>
         <div class="mdc-checkbox__ripple"></div>
    </div>
    <label for="checkbox-1">sth</label>
</div>

Answer 1

fix input:checkbox to input [type=checkbox]

$("input[type=checkbox]").attr('checked',false);

//or


$("input[type=checkbox]").removeAttr('checked');

If you want to select checked checkbox,

$("input:checked").removeAttr('checked');

//or

$("input[type=checkbox]:checked").removeAttr('checked');

``

Answer 2

you can use prop to uncheck checkboxes . This should work for you

$('#clear-filters').on('click', function () {
  $('input:checked').prop('checked',false);
});