addClass标记，如果复选框被选中，甚至在页面刷新

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>