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>