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>

addClass如果选中复选框则标记，即使在页面刷新时也是如此

1 个答案: