ladybird/Base/res/html/misc/checkbox.html

<html>
    <input id=foo type=checkbox>
    <label for=foo>Checkbox 1 (with a "for" attribute)</label>
    <pre id=foo-status></pre>

    <label>
        <input id=bar type=checkbox>
        Checkbox 2 (inside a label element)
    </label>
    <pre id=bar-status></pre>

    <script>
        var foo = document.getElementById("foo");
        var fooStatus = document.getElementById("foo-status");
        fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;

        var bar = document.getElementById("bar");
        var barStatus = document.getElementById("bar-status");
        barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;

        foo.addEventListener("change", function() {
            fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;
        });

        bar.addEventListener("change", function() {
            barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;
        });
    </script>
</html>
LibWeb: Protect LayoutCheckBox against crashes after event dispatch After dispatching a "change" event due to the checked state being modified, we may have been removed from the layout tree. Make LayoutCheckBox protect itself to prevent this from crashing. Also, add a little test page for checkboxes. :^) 2020-09-11 13:37:18 -03:00			`<html>`
Base: Update checkbox test page to have a <label> 2021-04-04 12:49:22 -03:00			`<input id=foo type=checkbox>`
LibWeb: Implement reverse lookup to labels from their labelable nodes This enables, for example, clicking on the check box, dragging the mouse over to the label, releasing the mouse to act as a click on the check box. This was implemented for labels / labelable nodes with the "for" attribute already. This implements the same for labelable nodes that are inside the label. 2022-02-16 11:55:13 -03:00			`<label for=foo>Checkbox 1 (with a "for" attribute)</label>`
			`<pre id=foo-status></pre>`

			`<label>`
			`<input id=bar type=checkbox>`
			`Checkbox 2 (inside a label element)`
			`</label>`
			`<pre id=bar-status></pre>`

LibWeb: Protect LayoutCheckBox against crashes after event dispatch After dispatching a "change" event due to the checked state being modified, we may have been removed from the layout tree. Make LayoutCheckBox protect itself to prevent this from crashing. Also, add a little test page for checkboxes. :^) 2020-09-11 13:37:18 -03:00			`<script>`
			`var foo = document.getElementById("foo");`
LibWeb: Implement reverse lookup to labels from their labelable nodes This enables, for example, clicking on the check box, dragging the mouse over to the label, releasing the mouse to act as a click on the check box. This was implemented for labels / labelable nodes with the "for" attribute already. This implements the same for labelable nodes that are inside the label. 2022-02-16 11:55:13 -03:00			`var fooStatus = document.getElementById("foo-status");`
			fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;

LibWeb: Protect LayoutCheckBox against crashes after event dispatch After dispatching a "change" event due to the checked state being modified, we may have been removed from the layout tree. Make LayoutCheckBox protect itself to prevent this from crashing. Also, add a little test page for checkboxes. :^) 2020-09-11 13:37:18 -03:00			`var bar = document.getElementById("bar");`
LibWeb: Implement reverse lookup to labels from their labelable nodes This enables, for example, clicking on the check box, dragging the mouse over to the label, releasing the mouse to act as a click on the check box. This was implemented for labels / labelable nodes with the "for" attribute already. This implements the same for labelable nodes that are inside the label. 2022-02-16 11:55:13 -03:00			`var barStatus = document.getElementById("bar-status");`
			barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;

LibWeb: Protect LayoutCheckBox against crashes after event dispatch After dispatching a "change" event due to the checked state being modified, we may have been removed from the layout tree. Make LayoutCheckBox protect itself to prevent this from crashing. Also, add a little test page for checkboxes. :^) 2020-09-11 13:37:18 -03:00			`foo.addEventListener("change", function() {`
LibWeb: Implement reverse lookup to labels from their labelable nodes This enables, for example, clicking on the check box, dragging the mouse over to the label, releasing the mouse to act as a click on the check box. This was implemented for labels / labelable nodes with the "for" attribute already. This implements the same for labelable nodes that are inside the label. 2022-02-16 11:55:13 -03:00			fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;
			`});`

			`bar.addEventListener("change", function() {`
			barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;
LibWeb: Protect LayoutCheckBox against crashes after event dispatch After dispatching a "change" event due to the checked state being modified, we may have been removed from the layout tree. Make LayoutCheckBox protect itself to prevent this from crashing. Also, add a little test page for checkboxes. :^) 2020-09-11 13:37:18 -03:00			`});`
			`</script>`
			`</html>`