RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 04:17:35 +00:00
Code Issues Activity Actions

LibWeb: Implement reverse lookup to labels from their labelable nodes

Browse source 
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.
This commit is contained in:
Timothy Flynn 2022-02-16 09:55:13 -05:00 • committed by Andreas Kling
parent 4b85866746
commit 4f19deb13b
2 changed files with 43 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

23
Base/res/html/misc/checkbox.html
View file

@ -1,12 +1,29 @@
<html>
<input id=foo type=checkbox>
<label for=foo>This is a checkbox</label>
<pre id=bar></pre>
<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() {
bar.innerHTML += foo.checked + "\n";
fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;
});
bar.addEventListener("change", function() {
barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;
});
</script>
</html>