本文介绍如何在网页中实现全选与取消选择功能。通过引入外部JavaScript代码，并结合HTML表单元素，用户可以一键选中或取消所有选项。注意：引入外部JS后需刷新页面方可生效。
<!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>无标题文档</title> <style type="text/css"> html,body,table,td,div{ font-size:12px;} .ybScontainer{ margin:0 auto; padding:15px; border:1px solid #CCCCCC;width:510px;} .TitleDiv{margin:3px 0px 0px 0px;} .leftTitle{ background:#993300; color:#FFFFFF; font-weight:bold; border:1px solid #993300;} .TitleLine{ border:1px solid #993300;} .Content1{ border-bottom:1px dashed #ccc; margin:0px 0px 3px 0px; padding:0px;} .ContentDiv{ border:1px solid #999999; padding:20px; margin:20px 0px 0px 0px;} a.mobanS{ color:#993300; text-decoration:none;}a.mobanS:hover{ background:#993300; color:#FFFFFF; text-decoration:none; padding:3px 0px 3px 0px;} </style> </head> <body> <div class="ybScontainer"> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">外观：</td> <td width="89%" class="TitleLine"> 宏伟 明亮 让人感觉大气</td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">大堂：</td> <td width="89%" class="TitleLine"> 非常气派 一般 灯光还可以</td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">登记：</td> <td width="89%" class="TitleLine"> 速度很快 务生态度很好 效率不是很高</td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">风格：</td> <td width="89%" class="TitleLine"> 欧式 日式 中式 现代 典雅 温馨 是我喜欢的 是我向往的 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">硬件：</td> <td width="89%" class="TitleLine"> 很高档 一般 比较差 不符合它的星级标准 符合它的星级标准 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">装修：</td> <td width="89%" class="TitleLine"> 比较新 豪华 比较陈旧 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">服务：</td> <td width="89%" class="TitleLine"> 一般 很周到 很热情 乏善可陈 不够细致 细节上面还有待加强 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">早餐：</td> <td width="89%" class="TitleLine"> 不错 比较简单 价格高 比较丰富 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">商务性：</td> <td width="89%" class="TitleLine"> 比较高 不是很高 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">停车：</td> <td width="89%" class="TitleLine"> 比较方便 不是很方便 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">地理位置：</td> <td width="89%" class="TitleLine"> 靠近市中心 近机场 比较好 交通比较方便 交通不是很方便 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">附近：</td> <td width="89%" class="TitleLine"> 有很多不错的餐厅 商业氛围比较好 比较安静 风景优美 </td> </tr> </table> </div> <div class="TitleDiv"><table width="100%" height="22" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="14%" class="leftTitle">总体：</td> <td width="89%" class="TitleLine"> 感觉不错 感觉酒店非常适合商务 适合旅游 很有情调 希望下次还住 感觉一般 </td> </tr> </table> </div> <div class="ContentDiv"> <div class="Content1" style="display:none;" id="contentOne"><span id="LaterContents1"></span></div> <div class="Content1" style="display:none;" id="contentTwo"><span id="LaterContents2"></span></div> <div class="Content1" style="display:none;" id="contentThree"><span id="LaterContents3"></span></div> <div class="Content1" style="display:none;" id="contentFour"><span id="LaterContents4"></span></div> <div class="Content1" style="display:none;" id="contentFive"><span id="LaterContents5"></span></div> <div class="Content1" style="display:none;" id="contentSix"><span id="LaterContents6"></span></div> <div class="Content1" style="display:none;" id="contentSeven"><span id="LaterContents7"></span></div> <div class="Content1" style="display:none;" id="contentEight"><span id="LaterContents8"></span></div> <div class="Content1" style="display:none;" id="contentNine"><span id="LaterContents9"></span></div> <div class="Content1" style="display:none;" id="contentTen"><span id="LaterContents10"></span></div> <div class="Content1" style="display:none;" id="contentEleven"><span id="LaterContents11"></span></div> <div class="Content1" style="display:none;" id="contentTwelve"><span id="LaterContents12"></span></div> <div class="Content1" style="display:none;" id="contentThirteen"><span id="LaterContents13"></span></div> <div class="Content1" style="display:none;" id="contentSumbit"><input name="" type="button" value=" 加入 " /></div> </div> <textarea cols="50" id="SScontent" rows="10"></textarea> </div> </body> </html>全选与取消选择功能说明
使用 Ctrl+A 组合键可实现全选操作。需要注意的是，若引入了外部 JavaScript 脚本，必须刷新页面后该功能才能正常执行。