<div id="app" class="flex items-center justify-center h-screen">
	<input class="checkbox mr-2" type="checkbox" data-attribute-checked="{{ checked }}" onchange="toggleChecked()" />
	<button class="btn btn-primary" onclick="toggleChecked()">
		Toggle
	</button>
</div>
import Cog from "https://esm.sh/@mzrk/cog";

const { variable, render } = Cog;
const checked = variable("checked", false);

window.toggleChecked = () => {
	checked.value = !checked.value;
};

document.addEventListener("DOMContentLoaded", function () {
	render(document.getElementById("app"));
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.4.19/full.css

External JavaScript

This Pen doesn't use any external JavaScript resources.