<html>
<head>
<title>JS实现全选、全不选、反选表单复选框</title>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
/**
* 选择复选框
* @param type 1 全选；0 全不选
*/
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 全不选
*/
function setCheckType(type) {
var btnSelect = $("btnSelect");
if(type) {
btnSelect.value = "全不选";
} else {
btnSelect.value = "全选";
}
fm.hidnSelectFlag.value = Number(!type);
}
/**
* 反选
*/
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>
转载请注明: haoshu发表于浩叔逛逛>>https://www.haoshu888.com/js/944.html