如何实现点击指定链接切换复选框的全选/全取消状态？

需求说明 #

点击class为dummy-select-deselect-finishing-options的<a>标签，切换.field--name-field-finishing-option内所有复选框的选中状态（全选/取消全选）。

现有HTML结构 #

<div class="field--name-field-finishing">
  <a href="" class="dummy-select-deselect-finishing-options">全选/取消全选</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>

尝试过的无效代码 #

JavaScript代码 #

$(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);
}

修复方案 #

你的代码逻辑本身没问题，但没有阻止a标签的默认跳转行为，点击后页面会刷新，导致复选框状态重置，看起来功能没生效。只需要在点击事件里添加阻止默认行为的代码即可：

$(document).ready(function() {
  $(".dummy-select-deselect-finishing-options").click(function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    var checkboxes = $(".field--name-field-finishing-option input[type='checkbox']");
    var isChecked = checkboxes.first().prop("checked");
    checkboxes.prop("checked", !isChecked);
  });
});

如果需要让选择器更精准（避免全局匹配），可以通过父元素定位复选框：

$(document).ready(function() {
  $(".dummy-select-deselect-finishing-options").click(function(e) {
    e.preventDefault();
    // 从当前a标签的父容器下查找目标复选框，避免全局干扰
    var $parentContainer = $(this).closest(".field--name-field-finishing");
    var checkboxes = $parentContainer.find(".field--name-field-finishing-option input[type='checkbox']");
    var isChecked = checkboxes.first().prop("checked");
    checkboxes.prop("checked", !isChecked);
  });
});

修改后，点击链接时会正常切换复选框状态，同时CSS中:checked对应的样式也会自动同步生效。

内容的提问来源于stack exchange，提问作者nathan111777