首页 > JS专栏 > JS实现全选、全不选、反选表单复选框
2016
03-07

JS实现全选、全不选、反选表单复选框

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


留下一个回复