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

JQuery .prop() on click checked > false

Posted by: admin February 22, 2020 Leave a comment


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


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);

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="">
    <p class="textPopUp"></p>
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


Something like this:

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



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

         id = $(this).attr('id');