Pārlūkot izejas kodu

Base: Add test page for HTML input type=radio elements

Timothy Flynn 4 gadi atpakaļ
vecāks
revīzija
274e94224d
2 mainītis faili ar 53 papildinājumiem un 0 dzēšanām
  1. 52 0
      Base/res/html/misc/radio.html
  2. 1 0
      Base/res/html/misc/welcome.html

+ 52 - 0
Base/res/html/misc/radio.html

@@ -0,0 +1,52 @@
+<body>
+    <b>Pick your house!</b>
+    <br />
+    <input type=radio id=gryffindor name=hp value=Gryffindor>
+    <label for=gryffindor>Gryffindor</label>
+    <br />
+    <input type=radio id=hufflepuff name=hp value=Hufflepuff>
+    <label for=hufflepuff>Hufflepuff</label>
+    <br />
+    <input type=radio id=ravenclaw name=hp value=Ravenclaw>
+    <label for=ravenclaw>Ravenclaw</label>
+    <br />
+    <input type=radio id=slytherin name=hp value=Slytherin>
+    <label for=slytherin>Slytherin</label>
+
+    <br />
+    <br />
+
+    <b>Pick your other house!</b>
+    <br />
+    <input type=radio id=stark name=got value=Stark>
+    <label for=stark>Stark</label>
+    <br />
+    <input type=radio id=lannister name=got value=Lannister>
+    <label for=lannister>Lannister</label>
+    <br />
+    <input type=radio id=baratheon name=got value=Baratheon>
+    <label for=baratheon>Baratheon</label>
+    <br />
+    <input type=radio id=targaryen name=got value=Targaryen>
+    <label for=targaryen>Targaryen</label>
+
+    <script>
+        const hp = document.getElementsByName('hp');
+        for (let i = 0; i < hp.length; ++i) {
+            hp[i].addEventListener('change', function() {
+                if (this.checked) {
+                    console.log('HP house:', this.value);
+                }
+            });
+        }
+
+        const got = document.getElementsByName('got');
+        for (let i = 0; i < got.length; ++i) {
+            got[i].addEventListener('change', function() {
+                if (this.checked) {
+                    console.log('GoT house:', this.value);
+                }
+            });
+        }
+    </script>
+</body>

+ 1 - 0
Base/res/html/misc/welcome.html

@@ -46,6 +46,7 @@ span#loadtime {
         <li><a href="float-3.html">floating boxes with overflow=hidden</a></li>
         <li><a href="padding-inline.html">inline elements with padding</a></li>
         <li><a href="event-bubbling-and-multiple-listeners.html">event bubbling and multiple listeners</a></li>
+        <li><a href="radio.html">radio button</a></li>
         <li><a href="checkbox.html">checkbox</a></li>
         <li><a href="canvas-rotate.html">canvas rotate()</a></li>
         <li><a href="margin-collapse-2.html">margin collapsing 2</a></li>