如果选中复选框，则添加类到标签，即使在页面刷新时

Question

我将如何在 jQuery 中编写以下内容？：

When page load / (or "Continue" button is clicked, if makes more sense)
    Find input[type=checkbox] in each .block-container
        If input is checked
            add class to label
        If input is not checked
            remove class from label

我有一长串遵循这种结构的复选框：

<div class="block-container">
    <div class="inner-container">
        <div class="form-group wpcf7-form-control wpcf7-checkbox checkbox-418">
            <div class="checkbox wpcf7-form-control wpcf7-checkbox checkbox-418 checked_check">
                <label class="">
                    <input type="checkbox" aria-invalid="false" value="Lorem ipsum title" name="checkbox-418" novalidate="novalidate" class="garlic-auto-save" checked="checked">
                    Lorem ipsum title</label>
            </div>
        </div>
    </div>
</div>

我有一个 toggleClass 在它们被点击时为标签添加颜色，还有一个花哨的复选框图标（复选框本身移到屏幕外）但是当页面刷新时，即使复选框是，也不会应用该类仍然检查。

因此，如果用户刷新页面，他们选中的复选框将保持选中状态，但视觉指示器（颜色、花哨的复选框）在他们看来是未选中的，因此他们将再次选中它并最终取消选中选中.

提前致谢。

编辑以添加我尝试过的内容：

$(document).ready(function() {
    $('.select-action').on('click',function() {
        $('.block-container input').each(function() {
            if ($("input[type=checkbox]").prop('checked')) {
                $(this).parent("label").addClass("symptomChecked");
                $(this).parent().parent().removeClass("empty_check").addClass("checked_check");
            } else {
                $("input").parent("label").removeClass("symptomChecked");
                $(this).parent().parent().removeClass("checked_check").addClass("empty_check");
            }
        });
    });
});

Answer 1

您可以拥有一个可以在页面加载时手动触发的更改事件处理程序

$(document).ready(function() {
  $('.block-container input[type="checkbox"]').on('change.symptom', function() {
    $(this).parent().toggleClass('symptomChecked', this.checked);
    $(this).closest('.checkbox').toggleClass('checked_check', this.checked).toggleClass('empty_check', !this.checked);
  }).trigger('change.symptom');
});

.symptomChecked {
  color: green;
}
.empty_check {
  background-color: grey;
}
.checked_check {
  border: 1 px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="block-container">
  <div class="inner-container">
    <div class="form-group wpcf7-form-control wpcf7-checkbox checkbox-418">
      <div class="checkbox wpcf7-form-control wpcf7-checkbox checkbox-418 checked_check">
        <label class="">
          <input type="checkbox" aria-invalid="false" value="Lorem ipsum title" name="checkbox-418" novalidate="novalidate" class="garlic-auto-save" checked="checked">Lorem ipsum title</label>
      </div>
    </div>
  </div>
</div>
<div class="block-container">
  <div class="inner-container">
    <div class="form-group wpcf7-form-control wpcf7-checkbox checkbox-418">
      <div class="checkbox wpcf7-form-control wpcf7-checkbox checkbox-418">
        <label class="">
          <input type="checkbox" aria-invalid="false" value="Lorem ipsum title" name="checkbox-418" novalidate="novalidate" class="garlic-auto-save">Lorem ipsum title</label>
      </div>
    </div>
  </div>
</div>
<div class="block-container">
  <div class="inner-container">
    <div class="form-group wpcf7-form-control wpcf7-checkbox checkbox-418">
      <div class="checkbox wpcf7-form-control wpcf7-checkbox checkbox-418">
        <label class="">
          <input type="checkbox" aria-invalid="false" value="Lorem ipsum title" name="checkbox-418" novalidate="novalidate" class="garlic-auto-save">Lorem ipsum title</label>
      </div>
    </div>
  </div>
</div>