label-dynamic.html (776B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 6 #c3, #c4 { 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 toggleAllCheckboxes() 19 { 20 for (var i = 1; i <= 4; ++i) { 21 var cb = document.getElementById('c'+i); 22 cb.checked = !cb.checked; 23 } 24 } 25 26 </script> 27 </head> 28 29 <body onload="toggleAllCheckboxes();"> 30 31 <div><input type="checkbox" name="test" id="c1"><label for="c1">check #c1</label></div> 32 <div><input type="checkbox" name="test" id="c2" checked><label for="c2">check #c2</label></div> 33 <div><input type="checkbox" name="test" id="c3"><label for="c3">check #c3</label></div> 34 <div><input type="checkbox" name="test" id="c4" checked><label for="c4">check #c4</label></div> 35 36 </body> 37 </html>