Jquery – How to make all checkboxes checked after clicking on a link?

There is such a markup:

<div class="field--name-field-finishing">
  <a href="" class="dummy-select-deselect-finishing-options">Select/Deselect All</a>
  
  <div class="field--name-field-finishing-option">
    <div class="form-checkboxes">
      
      <div class="js-form-type-checkbox">
      <input type="checkbox" id="option-29202" name="field_finishing[29202]" value="29202" checked="checked" class="form-checkbox">
      <label for="option-29202" class="option"><span class="views-field-field-image">
        <span class="field-content"> 
          <img loading="lazy" src="/path" typeof="Image">
        </span>
      </span>
        <span class="views-field-name"><span class="field-content">Hem Tags</span></span>
      </label>
    </div>
      
      <div class="js-form-type-checkbox">
        <input type="checkbox" id="option-29203" name="field_finishing[29203]" value="29203" checked="checked" class="form-checkbox">
        <label for="option-29203" class="option"><span class="views-field-field-image">
          <span class="field-content">
            <img loading="lazy" src="/path" typeof="Image">
          </span></span>
          <span class="views-field-name">
            <span class="field-content">Hang Tags</span>
            </span>
        </label>
      </div>
      
      <div class="js-form-type-checkbox">
        <input type="checkbox" id="option-29204" name="field_finishing[29204]" value="29204" checked="checked" class="form-checkbox">
        <label for="option-29204" class="option"><span class="views-field-field-image">
          <span class="field-content">
            <img loading="lazy" src="/path"  typeof="Image">
          </span>
          </span><span class="views-field-name">
          <span class="field-content">Folding and Bagging</span>
        </span>
        </label>
      </div>
      
    </div>
  </div>

</div>

I need to click on <a> with the dummy-select-deselect-finishing-options class so that all checkboxes in field--name-field-finishing-option are checked, when you click again, on the contrary, they are unchecked.

How to implement it?

I tried something like this but it doesn’t work:

$(document).ready(function() {
  $(".dummy-select-deselect-finishing-options").click(function() {
    var checkboxes = $(".field--name-field-finishing-option input[type='checkbox']");
    var isChecked = checkboxes.first().prop("checked");
    checkboxes.prop("checked", !isChecked);
  });
});

css:

.field--name-field-finishing-option span.fieldset-legend {
     font-size: rem(30px);
     font-weight: bold;
}
 .field--name-field-finishing-option .form-checkboxes {
     display: flex;
     flex-wrap: wrap;
     margin: rem(-10px);
}
 .field--name-field-finishing-option .form-checkboxes .form-item {
     display: flex;
     flex-direction: row;
     width: 50%;
     position: relative;
     padding: rem(10px);
}
 .field--name-field-finishing-option .form-checkboxes .form-item input {
     border-radius: 50%;
     padding: unset;
     box-shadow: unset;
     border: 1px solid getColor(neutral, 5);
     width: rem(25px);
     height: rem(25px);
     position: absolute;
     top: rem(26px);
     right: rem(26px);
}
 .field--name-field-finishing-option .form-checkboxes .form-item label {
     order: -1;
     display: flex;
     align-items: center;
     box-shadow: 0 rem(1px) rem(4px) rem(3px) #000;
     border-radius: rem(30px);
     width: 100%;
}
 .field--name-field-finishing-option .form-checkboxes .form-item label .views-field-name {
     padding-left: rem(17px);
     font-size: rem(18px);
}
 .field--name-field-finishing-option .form-checkboxes .form-item label img {
     border-radius: rem(30px) 0 0 rem(30px);
}
 .field--name-field-finishing-option .form-checkboxes .form-item input:checked + label {
     background: getColor(blue, 2);
     border: 1px solid getColor(blue, 5);
}