代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jquery-1.10.2.min.js"></script> </head><script type="text/javascript"> $(function() { var aFruit=document.getElementsByName("checkfruit"); var oSelectAll=document.getElementById("selectAll"); var oP=document.getElementById("content"); var str=""; //全選/全不選 oSelectAll.onchange=function() { if(this.checked) { for(var i=0;i<aFruit.length;i++) { aFruit[i].checked=true; str+=aFruit[i].value+" "; } oP.innerText="你選擇的瓜是："+str; }else { for(var i=0;i<aFruit.length;i++) { aFruit[i].checked=false; } oP.innerText="你沒有選擇任何瓜"; str=""; } } //單個點擊復選框 var str1=""; for(var i=0;i<aFruit.length;i++) { aFruit[i].onchange=function() { if(this.checked) { str1=str1+this.value+" "; }else { str1=str1.replace(this.value,""); } oP.innerText="你選擇的瓜是："+str1; } } }); </script> <body> <div> <label><input type="checkbox" id="selectAll"/>全選/全不選：</label><br /><br /> <label><input type="checkbox" name="checkfruit" value="冬瓜"/>冬瓜</label> <label><input type="checkbox" name="checkfruit" value="南瓜"/>南瓜</label> <label><input type="checkbox" name="checkfruit" value="西瓜"/>西瓜</label> <label><input type="checkbox" name="checkfruit" value="北瓜"/>北瓜</label> </div> <p id="content"></p> </body> </html>