Home » Jquery » JQuery .prop() on click checked > false

JQuery .prop() on click checked > false

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a form with checkboxes which generates a new block displaying the color filters selected by the user.

Form

In this new block, I made a click event which removes the selected filter with the “.buttonRemoveFilter” button.

I try to uncheck the checkbox in conjunction with the filter but I can only uncheck all the checkboxes.

$(document).on("click", ".buttonRemoveFilter", function(){

     $("[id^=branche_search_form_couleurs_").prop("checked", false);
     $(this).parent().parent().remove();
});

I try to do, that when I remove a filter from the new block, it unchecks the color checkbox related to this filter.

New block

<div class="poPupFiltre">
  <div class="sousBlockPoPup">
    <button class="buttonRemoveFilter">
      <img class="img-fluid imgPoPup" src="{{ asset ('../build/images/supprimer.svg') }}" alt="">
    </button>
    <p class="textPopUp"></p>
  </div>
</div>
How to&Answer:

Add a way of knowing which filter you have clicked – if you want to remove BLANC filter, check that the user has clicked BLANC filter type. Then access checkbox input by using

$("input[value='"+clickedFilterType+"']")

Something like this:

$(document).on("click", ".buttonRemoveFilter", function(){
     let clickedFilterType = $(this).attr("data-type");
     $("input[value='"+clickedFilterType+"']").prop("checked", false);

});

Answer:

Try these options.

In your form add a common class to your input checkbox (let’s say the class name is “.chxbox”)

Then use this jQuery function

   $('.chxbox').click(function(){
         id = $(this).attr('id');
         $(id).prop('checked',false);
         $(this).remove();
    });