表单的全选和反选

html代码：

 

代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>演示</title>
        <script type="text/javascript" src="jslib/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="jslib/javaScriptDemo.js"></script>

    </head>
    <body>
        <form id="fm" name="fm">
            <input type="checkbox" name="ck"/>足球<br/>
            <input type="checkbox" name="ck"/>排球<br/>
            <input type="checkbox" name="ck"/>气球<br/>
            <input type="checkbox" name = "ck" id="quan" />全选<br/>
            <input type="checkbox" id="fanxuan" />反选
        </form>
    </body>
</html>

 

javaScriptDemo.js代码：

 

 

代码 
$(function() {

    var ck = document.getElementsByName("ck");// 根据name属性值获取对象
    var quan = document.getElementById("quan");// 全选
    var fanxuan = document.getElementById("fanxuan");// 反选
    var flag = true;
    quan.onclick = function () {// 实现全选和取消全选
        for (var i = 0; i < ck.length; i++) {
            if (ck[i].type == "checkbox") {
                ck[i].checked = flag;
            }
        }
      
        if (flag) {
            flag = false;
        } else {
            flag = true;
        }
    }

    fanxuan.onclick = function() {// 反选
        for (var i = 0; i < ck.length; i++) {
            if (ck[i].type == "checkbox") {
                if (ck[i].checked) {
                    ck[i].checked = false;
                } else {
                    ck[i].checked = true;
                    quan.checked = false;// 不要使全选框被选中
                }
            }
        }
    }
});

 

 

posted @ 2010-12-18 14:50  meng72ndsc  阅读(276)  评论(0)  编辑  收藏  举报