Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Check box (checkbox) select all/do not select all/return</title><style>body,dl,dt,dd,p{margin:0;padding:0;}body{font-family:Tahoma;font-size:12px;}label,input,a{vertical-align:middle;}label{padding:0 10px 0 5px;}a{color:#09f;text-decoration:none;}a:hover{color:red;}dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}dt{padding-bottom:10px;border-bottom:1px solid #666;}dt label{font-weight:700;}p{margin-top:10px;}</style><script type="text/javascript">Window. onload = function () {var oA = document. getElementsByTagName ("a") [0]; var oInput = document. getElementsByTagName ("input"); var oLabel = document. getElementsByTagName ("label") [0]; var isCheckAll = function () {for (var I = 1, n = 0; I <oInput. length; I ++) {oInput [I]. checked & n ++} oInput [0]. checked = n = oInput. length-1; oLabel. innerHTML = oInput [0]. checked? "None": "All selected"}; // All selected/all not selected oInput [0]. onclick = function () {for (var I = 1; I <oInput. length; I ++) {oInput [I]. checked = this. checked} isCheckAll ()}; // reverse select oA. onclick = function () {for (var I = 1; I <oInput. length; I ++) {oInput [I]. checked =! OInput [I]. checked} isCheckAll ()}; // The status of the all-selected box is updated based on the number of checks. for (var I = 1; I <oInput. length; I ++) {oInput [I]. onclick = function () {isCheckAll ()}}}</script></head><body><dl> <dt><input type="checkbox" id="checkAll" /><label>Select all</label>Invert selection</dt> <dd> <p><input type="checkbox" name="item" /><label>Option (1)</label></p> <p><input type="checkbox" name="item" /><label>Option 2)</label></p> <p><input type="checkbox" name="item" /><label>Option 3)</label></p> <p><input type="checkbox" name="item" /><label>Option (4)</label></p> <p><input type="checkbox" name="item" /><label>Option 5)</label></p> <p><input type="checkbox" name="item" /><label>Option 6)</label></p> <p><input type="checkbox" name="item" /><label>Option 7)</label></p> <p><input type="checkbox" name="item" /><label>Option (8)</label></p> <p><input type="checkbox" name="item" /><label>Option (9)</label></p> <p><input type="checkbox" name="item" /><label>Option (10)</label></p> </dd> </dl><center>1. Switch to select all or do not select all text; 2. Update the status of the entire selection box based on the selected number;</center></body></html></td> </tr></table>
Tip: you can modify some code before running
