label-dynamic.html (1279B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 6 .hideradios input { 7 display: none; 8 } 9 10 input:checked + label { 11 background-color: yellow; 12 } 13 14 </style> 15 16 <script type="text/javascript"> 17 18 function chooseSecondItems() 19 { 20 document.getElementById("a2").checked = true; 21 document.getElementById("b2").checked = true; 22 } 23 24 </script> 25 </head> 26 27 <body onload="chooseSecondItems();"> 28 29 <div> 30 <div><input type="radio" name="a" id="a1"><label for="a1">radio #a1</label></div> 31 <div><input type="radio" name="a" id="a2"><label for="a2">radio #a2</label></div> 32 <div><input type="radio" name="a" id="a3"><label for="a3">radio #a3</label></div> 33 <div><input type="radio" name="a" id="a4" checked><label for="a4">radio #a4</label></div> 34 <div><input type="radio" name="a" id="a5"><label for="a5">radio #a5</label></div> 35 </div> 36 37 <div class="hideradios"> 38 <div><input type="radio" name="b" id="b1"><label for="b1">radio #b1</label></div> 39 <div><input type="radio" name="b" id="b2"><label for="b2">radio #b2</label></div> 40 <div><input type="radio" name="b" id="b3"><label for="b3">radio #b3</label></div> 41 <div><input type="radio" name="b" id="b4" checked><label for="b4">radio #b4</label></div> 42 <div><input type="radio" name="b" id="b5"><label for="b5">radio #b5</label></div> 43 </div> 44 45 </body> 46 </html>