我有一个用于“全部选中”和“全部取消选中”复选框的 JavaScript。它曾经工作得很好，但现在我添加了一些 HTML 格式，我似乎无法让它正常工作。 “取消全部选中”按钮似乎有效，但“全部选中”按钮看起来像是快速检查然后取消选中表单中的所有复选框。我做错了什么？如何修复此问题以便“全部选中”和“全部取消选中”按钮正常工作？
这是我的代码:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
</style>
</head><body bgcolor="#99ccff">
<script type="text/javascript" language="javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document.forms[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
<form name="list_form" action="#" method='POST'>
<input type="hidden" name="selected_region" value="APAC">
<input type="hidden" name="selected_qtr" value="Q1">
<input type="hidden" name="selected_year" value="2013">
<table width="300" cellpadding="0" cellspacing="25" valign="top" border="0">
<TR valign="top">
<td>
<table width="400" class="border0">
<TR valign="bottom">
<td id="tfont4"><b>Check Test</b><BR><hr><BR></td>
</tr>
</table>
</td>
</TR>
<tr>
<td>
<table width="400" cellpadding="0" cellspacing="0" valign="top" border="0">
<tr>
<td>
<input class="button" type="Submit" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();">
</td>
<td align="right">
<input class="button" type="Submit" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();">
</td>
</tr>
</table>
</td>
</tr>
<table border="0" cellpadding="10" width="400">
<tr>
<td valign="top">
<input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia">
<label for="Indonesia"><span><span></span></span>Indonesia</label><BR>
<input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia">
<label for="Malaysia"><span><span></span></span>Malaysia</label><BR>
<input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore">
<label for="Singapore"><span><span></span></span>Singapore</label><BR>
<input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand">
<label for="Thailand"><span><span></span></span>Thailand</label><BR>
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
</table>
<BR>
<input class="button" type="Submit" value="Generate Reports">
</form>
</center>
最佳答案
看起来运行良好。您提到的问题可能是因为您将选中和取消选中字段的输入类型设置为提交而不是按钮。
function checkAll(formname, checktoggle) {
var checkboxes = new Array();
checkboxes = document.forms[formname].getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
</style>
</head>
<body bgcolor="#99ccff">
<form name="list_form" action="#" method='POST'>
<input type="hidden" name="selected_region" value="APAC">
<input type="hidden" name="selected_qtr" value="Q1">
<input type="hidden" name="selected_year" value="2013">
<table width="300" cellpadding="0" cellspacing="25" valign="top" border="0">
<TR valign="top">
<td>
<table width="400" class="border0">
<TR valign="bottom">
<td id="tfont4"><b>Check Test</b>
<BR>
<hr>
<BR>
</td>
</tr>
</table>
</td>
</TR>
<tr>
<td>
<table width="400" cellpadding="0" cellspacing="0" valign="top" border="0">
<tr>
<td>
<input type="button" value="Check All" onclick="javascript:checkAll('list_form', true);" href="javascript:void();">
</td>
<td align="right">
<input type="button" value="Uncheck All" onclick="javascript:checkAll('list_form', false);" href="javascript:void();">
</td>
</tr>
</table>
</td>
</tr>
<table border="0" cellpadding="10" width="400">
<tr>
<td valign="top">
<input id="Indonesia" TYPE="checkbox" NAME="selected_countries" value="Indonesia">
<label for="Indonesia"><span><span></span></span>Indonesia</label>
<BR>
<input id="Malaysia" TYPE="checkbox" NAME="selected_countries" value="Malaysia">
<label for="Malaysia"><span><span></span></span>Malaysia</label>
<BR>
<input id="Singapore" TYPE="checkbox" NAME="selected_countries" value="Singapore">
<label for="Singapore"><span><span></span></span>Singapore</label>
<BR>
<input id="Thailand" TYPE="checkbox" NAME="selected_countries" value="Thailand">
<label for="Thailand"><span><span></span></span>Thailand</label>
<BR>
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
</table>
<BR>
<input class="button" type="Submit" value="Generate Reports">
</form>
</center>关于Javascript 复选框取消选中全部有效，但选中全部不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38854644/