JQuery .prop () при клике проверено> false

Question

У меня есть форма с флажками, которая генерирует новый блок, отображающий выбранные пользователем цветовые фильтры.

Форма

В этом новом блоке я сделал событие щелчка, которое удаляет выбранный фильтр с помощью кнопки «.buttonRemoveFilter».

Я пытаюсь снять флажок вместе с фильтром, но могу снять только все флажки.

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

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

Я пытаюсь сделать так, чтобы при удалении фильтра из нового блока он снимал флажок цвета, связанный с этим фильтром.

Новый блок

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

Answer 1

Добавьте способ узнать, по какому фильтру вы щелкнули - если вы хотите удалить фильтр BLAN C, убедитесь, что пользователь щелкнул по типу фильтра BLAN C. Затем получите доступ к флажкам, используя

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

Примерно так:

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

});

Answer 2

Попробуйте эти варианты.

В вашей форме добавьте общий класс к вашему флажку ввода (скажем, имя класса ".chxbox")

Затем используйте эту jQuery функцию

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