mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 16:42:44 +00:00
4f19deb13b
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.
29 lines
919 B
HTML
29 lines
919 B
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>
|