Track Checkbox State
Remember the state of a checkbox as the user changes pages
Overview
Remember whether a checkbox is clicked or not, and maintain that state on each page load as the user navigates through your site.
Good for, e.g. a day/night mode switch.
Implementing
Place this in your SITE-wide /BODY custom code area;
<script>
// Handle checkbox tracking
// both checked and unchecked events
$("input[type='checkbox'][wfu-bind-tracked]").change(function() {
const label = $(this).attr("wfu-bind-tracked");
if(this.checked)
window.tracker.track(label);
else
window.tracker.untrack(label);
updateTracked();
});
</script>
Also place this code inside and at the end of the updateTracked()
function in your site-wide /BODY custom code.
// Look for any data-bound checkboxes
// and updated them according to the tracked state
$("input[type='checkbox'][wfu-bind-tracked]").each(function() {
const t = $(this).attr("wfu-bind-tracked");
const checked = window.tracker.isTracked(t) || false;
// jQuery set checkbox checked
// https://stackoverflow.com/a/19630917
$(this).prop('checked', checked);
// For custom-styled Webflow checkboxes
// we must manually update the checked class state
const $customCheck = $(this).prev();
const isCustomCheck = $customCheck.length === 1;
if (isCustomCheck) {
if (checked)
$customCheck.addClass("w--redirected-checked");
else
$customCheck.removeClass("w--redirected-checked");
}
});
Last updated
Was this helpful?