checked.html (2076B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Selector: pseudo-classes (:checked)</title> 4 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="utils.js"></script> 9 <div id="log"></div> 10 <select id=select1> 11 <optgroup label="options" id=optgroup1> 12 <option value="option1" id=option1 selected>option1 13 <option value="option2" id=option2>option2 14 <option value="option2" id=option3 checked>option3 15 </select> 16 <input type=checkbox id=checkbox1 checked> 17 <input type=checkbox id=checkbox2> 18 <input type=checkbox id=checkbox3 selected> 19 <input type=radio id=radio1 checked> 20 <input type=radio id=radio2> 21 <form> 22 <p><input type=submit contextmenu=formmenu id="submitbutton"></p> 23 <menu type=context id=formmenu> 24 <!-- historical; these should *not* match --> 25 <menuitem type=checkbox checked default id=menuitem1> 26 <menuitem type=checkbox default id=menuitem2> 27 <menuitem type=checkbox id=menuitem3> 28 <menuitem type=radio checked id=menuitem4> 29 <menuitem type=radio id=menuitem5> 30 </menu> 31 </form> 32 33 <script> 34 testSelectorIdsMatch(":checked", ["option1", "checkbox1", "radio1"], "':checked' matches checked <input>s in checkbox and radio button states, selected <option>s"); 35 36 document.getElementById("checkbox1").removeAttribute("type"); // change type of input 37 document.getElementById("radio1").removeAttribute("type"); // change type of input 38 testSelectorIdsMatch(":checked", ["option1"], "':checked' should no longer match <input>s whose type checkbox/radio has been removed"); 39 40 document.getElementById("option2").selected = "selected"; // select option2 41 document.getElementById("checkbox2").click(); // check chekbox2 42 document.getElementById("radio2").click(); // check radio2 43 testSelectorIdsMatch(":checked", ["option2", "checkbox2", "radio2"], "':checked' matches clicked checkbox and radio buttons"); 44 </script>