複選框的全選功能,JavaScript實作。
JavaScript小例子:複選框全選
這隻是一個小例子,很簡單,但是這個功能還是很常用的:
實作後效果如圖:
JavaScript代碼:
<script type="text/javascript">
function selectAll()
{
var allMails = document.getElementsByName("allMails")[0];
var mails = document.getElementsByName("email");
if(allMails.checked)
{
for(var i = 0; i < mails.length; ++i)
{
mails[i].checked = true;
}
}
else
{
for(var i = 0; i < mails.length; ++i)
{
mails[i].checked = false;
}
}
}
</script>
JSP頁面:
<%@ 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>
<script type="text/javascript">
function selectAll()
{
var allMails = document.getElementsByName("allMails")[0];
var mails = document.getElementsByName("email");
if(allMails.checked)
{
for(var i = 0; i < mails.length; ++i)
{
mails[i].checked = true;
}
}
else
{
for(var i = 0; i < mails.length; ++i)
{
mails[i].checked = false;
}
}
}
</script>
</head>
<body>
全選<input type="checkbox" onclick="selectAll()" name="allMails"><br><br><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
<input type="checkbox" name="email"><br>
</body>
</html>
參考資料
聖思園張龍老師Java Web教育訓練視訊。
作者: 聖騎士Wind
出處: 部落格園: 聖騎士Wind
Github: https://github.com/mengdd
微信公衆号: 聖騎士Wind
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicGcq5CO1IzXhR2YkBTO2QWZyUGMfh2ZfJ3bm9VZk92YyF3NzkTN1AjMyQDMwIzXv9CX5MTN5YDOvwFZkdmbl12Lc12bj91cn9Gbi52YvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.jpg)