HTML 复选框 checkbox 的 JavaScript 的全选和全反选

来源：互联网发布：instagram用不了网络编辑：程序博客网时间：2024/04/30 20:46

checkbox 或者按钮实现 form 内的 checkbox 全选或者反选，代码很简单，全部代码如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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="AllCheck (this.form);return false;"value=""></td><!-- 按钮方式，本质无区别 --><td align="center"><input name="" type="button" class="input_hide" onClick="ChangeCheck(this.form);return false;"value="选/反选"></td><td align="center"></td></tr></table></form></body><script type="text/javascript">  // 选择状态  var selectState = false;  // 全选或者全取消  function AllCheck(thisform)  {    for (var i = 0; i < thisform.elements.length; i++)    {      // 提取控件        var checkbox = thisform.elements[i];      checkbox.checked = !selectState;    }    selectState = !selectState;  }  // 反选  function ChangeCheck(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>

效果演示

Q群讨论 236201801