复选框的全选、反选、不选等操作，多种方法

来源：互联网发布：阿里云域名备案系统编辑：程序博客网时间：2024/05/16 09:14

方法一：最好，控制在一个form中

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
    <script language="javascript">
    function selectIt() {

        form = document.lzyy   //获取form对象

        action = event.srcElement.name   //出发时间的那个组件的名字，这里只全选和反选按钮
  var value='';
        for (var i = 0; i < form.elements.length; i++) {

            if (form.elements[i].name == "checkbox") {

                e = form.elements[i]
    value+=e.value;
                e.checked = (action == "selectAll") ? (form.selectAll.checked) : (!e.checked)
                ////在这里通过条件表达式?:来使每个框反选。
            }
        }
alert(value);
    }
</script>
<form name="lzyy">
    <p class="STYLE1">
        全选与反选
        <input type="checkbox" name="selectAll" value="checkbox" onClick="selectIt()">
        <br>
        Item1    <input type="checkbox" name="checkbox" value=1>
        <br>
        Item2   <input type="checkbox" name="checkbox" value=2>
        <br>
        Item3    <input type="checkbox" name="checkbox" value=3>
        <br>
        Item4    <input type="checkbox" name="checkbox" value=4>
        <br>
        Item5   <input type="checkbox" name="checkbox" value=5>
    </p>
</form>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------

方法二：通过元素名称，所以得保证非受控元素name值不和这些受控复选框相同

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <script type="text/javascript">
            function checkEvent(name, allCheckId) {
                var allCk = document.getElementById(allCheckId);
                if (allCk.checked == true) checkAll(name);
                else checkAllNo(name);
            }

              //反选
            function reserveCheck(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++) {
                        if (names[i].checked) names[i].checked = false;
                        else names[i].checked = true;
                    }
                }
            }

            //全选
            function checkAll(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++)
                    names[i].checked = true;
                }
            }

            //全不选
            function checkAllNo(name) {
                var names = document.getElementsByName(name);
                var len = names.length;
                if (len > 0) {
                    var i = 0;
                    for (i = 0; i < len; i++)
                    names[i].checked = false;
                }
            }
        </script>
    </head>

    <body>
        <input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />
        全选
        <input type="checkbox" id="ckReserve" onclick="reserveCheck('ck','ckReserve')"
        />
        反选
        <br />
        <input type="checkbox" name="ck" value="1" />
        篮球
        <br />
        <input type="checkbox" name="ck" value="2" />
        旅游
        <br />
        <input type="checkbox" name="ck" value="3" />
        读书
        <br />
        <input type="checkbox" name="ck" value="4" />
        美食
        <br />
        <input type="checkbox" name="ck" value="5" />
        睡觉
    </body>

</html>

-----------------------------------------------------------------------------------------------------

方式三：

------------------------------------------------------------------------------------------------------

其他方式：《再思考思考》

// 说明：Javascript 控制 CheckBox 的全选与取消全选
function checkAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for (var i = 0; i < len; i++) {
        if ((el[i].type == "checkbox") && (el[i].name == name)) {
            el[i].checked = true;
        }
    }
}
function clearAll(name) {
    var el = document.getElementsByTagName('input');
    var len = el.length;
    for (var i = 0; i < len; i++) {
        if ((el[i].type == "checkbox") && (el[i].name == name)) {
            el[i].checked = false;
        }

    }

}
或者