DOM对象forms表单操作多选框执行全选,全部选,反选操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单操作多选框</title>
</head>
<body>
<form action="">
    <input type="checkbox">多选1
    <br>
    <input type="checkbox">多选2
    <br>
    <input type="checkbox">多选3
    <br>
    <input type="checkbox">多选4
    <br>
    <br>
</form>

<button id="quanxuan">全选</button>
<button id="buxuan">全不选</button>
<button id="fanxuan">反选</button>
<script>
    var forms = document.forms;
    var inputs = forms[0].elements;
    //全选,把所有的多选按钮的checked值都修改为1
    document.getElementById("quanxuan").onclick = function(){
        for(var i = 0;i<inputs.length;i++){
            //在对checked进行赋值的时候,1表示赋值为选中为true,0表示全部没选中为false;
            //只要不等于0的数字都为true,一等于0就是false
            inputs[i].checked = -100;
        }
    }
    //全部不选,把所有的多选按钮的checked值都修改为0
    document.getElementById("buxuan").onclick = function(){
        for(var i = 0;i<inputs.length;i++){
            inputs[i].checked = 0;
        }
    }
    //反选,基本思路是获取页面上的多选按钮,然后判断按钮是选择状态还是未选择状态,然后改变其状态为反向
    document.getElementById("fanxuan").onclick = function(){
        for(var i = 0;i<inputs.length;i++) {
            //反选的逻辑,只要对他本身的状态取反就可以了,
            //对于数值来说 ,只要不等于0的数字都为true,一等于0就是false,所以非0取反就是0,0取反后就是非0;
            inputs[i].checked = !inputs[i].checked;
        }
    }
</script>
</body>
</html>

如果用Jquery的方式来实现就更简单了 :注意button按钮会自动提交表单,所以要定义在form标签外部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery操作全选全不选和反选</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<form action="reg.php">
    <p>请选择喜欢的水果 : </p>
    <p>
        <input type="checkbox">西瓜
    </p>
    <p>
        <input type="checkbox">香蕉
    </p>
    <p>
        <input type="checkbox">苹果
    </p>
    <p>
        <input type="checkbox">草莓
    </p>
    <p>
        <input type="checkbox">椰子
    </p>
</form>
<p>
    <button id="all">全选</button>
    <button id="notall">全不选</button>
    <button id="unall">反选</button>
</p>
<script>
    //对三个选择按钮进行赋值
    //  1:全选
    $("#all").click(function(){
                $(":checkbox").attr({"checked":true});
    });
    //  2:全不选
    $("#notall").click(function(){
                $(":checkbox").attr({"checked":false});
    });
    //  3:反选
    $("#unall").click(function(){
                $(":checkbox").each(function(){
                    this.checked = !this.checked;
                });
    });
</script>
</body>
</html>