您的位置：首页 > Web前端 > JavaScript

HTML 复选框 checkbox 的 JavaScript 的全选和全反选(转)

2015-09-24 20:12 826 查看
[html] view
plaincopy

<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>



效果演示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航