轉發！HTML 複選框 checkbox 的 JavaScript 的全選和全反選

時間 2019-11-19

標籤轉發 html 複選框 checkbox javascript 全選欄目 HTML 简体版

原文原文鏈接

checkbox 或者按鈕實現 form 內的 checkbox 全選或者反選，代碼很簡單，所有代碼以下：javascript

[html] view plain copy

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>check test</title>
</head>
<body>
<form name="formGroup" id="formGroup" action="#" method="post" target="_self">
<table border="1" cellpadding="2" cellspacing="1" class="table_hide">
<tr class="table_title">
<td width="50" align="center" class="text_center">序號</td>
<td width="40" align="center" class="text_center">選擇</td>
<td width="100" align="center"></td>
<td width="100" align="center"></td>
</tr>
<tr>
<td align="center" class="text_center">1</td>
<td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center" class="text_center">2</td>
<td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center" class="text_center">3</td>
<td align="center" class="text_center"><input name="groupCheckbox" type="checkbox" value="" class="input_hide"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">全選</td>
<td align="center"><input name="" type="checkbox" class="input_hide" onClick="CheckSelect(this.form);return false;" value=""></td>
<td align="center"><input name="" type="button" class="input_hide" onClick="CheckSelect(this.form);return false;" value="選/反選"></td>
<td align="center"></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
// 選擇或者反選 checkbox
function CheckSelect(thisform)
{
// 遍歷 form
for ( var i = 0; i < thisform.elements.length; i++)
{
// 提取控件
var checkbox = thisform.elements[i];
// 檢查是不是指定的控件
if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === false)
{
// 正選
checkbox.checked = true;
}
else if (checkbox.name === "groupCheckbox" && checkbox.type === "checkbox" && checkbox.checked === true)
{
// 反選
checkbox.checked = false;
}
}
}
</script>
</html>