一：1）引進jquery-1.6.4.min.js檔案
2）如下：
a)預設情況:
b)點擊全選後並點擊提交按鈕後：
c)當點擊個別按鈕時：
二：程式碼範例如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title></title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript" src="<%=basePath %>js/jquery-1.6.4.min.js"></script><script type="text/javascript">$(document).ready(function(){ $('#checkedAll').click(function(){ // if(this.checked){/*對預設是否為選中進行判斷*/// $('[name=checkboxt]:checkbox').attr('checked',true);/*checked為true時為預設顯示的狀態,為true實現全選功能*/// }else{// $('[name=checkboxt]:checkbox').attr('checked',false);/*false為反選即為全部選功能*/// }//實現全選全不選的另一種方法$('[name=checkboxt]:checkbox').attr('checked',this.checked);/*checked為true時為預設顯示的狀態*/ }); //實現反選功能/* $('#checkedRev').click(function(){ $('[name=checkboxt]:checkbox').each(function(){ this.checked=!this.checked; }); });*/ //點擊提交按鈕查看所選複選框的內容 $('#send').click(function(){ var str="你的愛好是："; $('[name=checkboxt]:checkbox:checked').each(function(){str+=$(this).val()+",";//接收顯示所選複選框的內容}); alert(str); }); });</script> <style type="text/css">*{padding:10xp;margin:0;}body {padding-left:100px;padding-top:100px;font-size:12px;font-family:"宋體";}</style> </head><body><form action="" method="post">你的愛好是：<input type="checkbox" id="checkedAll"/>全選/全不選<!-- <input type="checkbox" id="checkedRev"/>反選 --><br/><input type="checkbox" name="checkboxt" value="看書"/>看書<input type="checkbox" name="checkboxt" value="唱歌"/>唱歌<input type="checkbox" name="checkboxt" value="跳舞"/>跳舞<input type="checkbox" name="checkboxt" value="運動"/>運動<br/><input type="button" id="send" value="提交"/></form></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
