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

JS 控制复选框 checkbox 的全选、全不选与反选

2012-12-29 15:19 447 查看

.

.

.

.

.

复选框的全选、全不选与反选非常常用，实现的方法也比较多。今天写这个是用按钮来控制的，当然也可以使用复选框本身来控制。

好了，废话不多说，直接上代码，看代码就是最直接的学习方式。

<html>
<head>
<title>checkbox test</title>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
/**
* 选择复选框
* @param type 1 全选；0 全不选
* @author yuhuashi
* @Date 2012-12-29
*/
function checkAll(type) {
type = Number(type);
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = type;
}
}
setCheckType(type);
}

/**
* 设置按钮文字和选择标识
* @param type 1 全选；0 全不选
* @author yuhuashi
* @Date 2012-12-29
*/
function setCheckType(type) {
var btnSelect = $("btnSelect");
if(type) {
btnSelect.value = "全不选";
} else {
btnSelect.value = "全选";
}
fm.hidnSelectFlag.value = Number(!type);
}

/**
* 反选
* @author yuhuashi
* @Date 2012-12-29
*/
function checkOpposite() {
var inputs = document.getElementsByTagName("input");
var checkboxLength = 0; // 所有复选框的数量
var selectedCount = 0; // 所有被选中的复选框数量
var checkType = false;
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = !inputs[i].checked;
checkType = inputs[i].checked;
checkboxLength++;
if(checkType) { selectedCount++; }
}
}
if((checkboxLength == selectedCount) || (!selectedCount)) {
setCheckType(checkType);
}
}
</script>
</head>

<body>
<form name="fm" action="#" method="post">
<input type="checkbox" name="" value=""/><br/>
<input type="checkbox" name="" value=""/><br/>
<input type="checkbox" name="" value=""/><br/>
<input type="checkbox" name="" value=""/><br/>
<input type="checkbox" name="" value=""/><br/>
<input type="button" id="btnSelect" value="全选" onclick="checkAll(fm.hidnSelectFlag.value)"/>
<input type="hidden" name="hidnSelectFlag" value="1"/>
<input type="button" value="反选" onclick="checkOpposite()"/>
</form>
</body>
</html>

很简单吧，几句话就搞定了。如果有什么疑问欢迎留言交流。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航