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

48 篇文章 0 订阅

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

.

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值