复选框的全选与反选

例子下载

效果：

html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

</head>
<body>
    <form method="post">
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" valign="middle">
                <table width="40%" border="1" align="center" cellpadding="0" cellspacing="0">
                    <input name="ids" id="ids" type="hidden" value="" />
                    <input name="names" id="names" type="hidden" value="" />
                    <tr>
                        <td style="width: 10%; cursor: pointer;" onclick="selectAllCheckBox('td_selected_all');"
                            id="td_selected_all">
                            全选
                        </td>
                        <td style="width: 30%">
                            城市
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a1" value="北京" />
                        </td>
                        <td>
                            北京
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a2" value="天津" />
                        </td>
                        <td>
                            天津
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a3" value="重庆" />
                        </td>
                        <td>
                            重庆
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="city" onclick="chooseTeacher(this)" id="a4" value="上海" />
                        </td>
                        <td>
                            上海
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

js:

<script type="text/javascript" language="javascript">
    //默认全选
    document.getElementById("td_selected_all").innerHTML = "全选";
    
    //点击多选框触发的事件
    function chooseTeacher(checkBox) {
        selectCheckBox(checkBox);
    }

    //获取当前选中对象的id及value
    function selectCheckBox(checkBox) {
        var ids = $("#ids").val();
        var names = $('#names').val();
        //添加
        if (checkBox.checked == true) {
            if (ids != "") {
                ids = "," + ids + "," + checkBox.id + ",";
                names = "," + names + "," + checkBox.value + ",";
            }
            else {
                ids = "," + checkBox.id + ",";
                names = "," + checkBox.value + ",";
            }
        }
        //删除
        else {
            ids = "," + ids + ",";
            names = "," + names + ",";

            if (ids.indexOf("," + checkBox.id + ",") > -1) {
                ids = ids.replace("," + checkBox.id + ",", ",");
                names = names.replace("," + checkBox.value + ",", ",");
            }
        }
        //去掉末尾逗号
        if (ids.length > 1) {
            ids = ids.substring(1, ids.length - 1);
        }
        else {
            ids = "";
        }
        if (names.length > 1) {
            names = names.substring(1, names.length - 1);
        }
        else {
            names = "";
        }
        //赋值,做数据处理。
        $("#ids").attr("value", ids);
        $("#names").attr("value", names);
    }

    //全选、反选
    function selectAllCheckBox(msg_id) {
        var flag = isAllChecked();
        //循环表单里的所有元素
        for (var i = 0; i < document.forms[0].elements.length; i++) {
            //如果是多选框的话
            if (document.forms[0].elements[i].type == 'checkbox') {
                //获取当前元素
                var obj = document.forms[0].elements[i];
                if (flag) {
                    if (obj.checked) {
                        obj.checked = false;
                        //记录id和value
                        selectCheckBox(obj);
                    }
                }
                else {
                    if (!obj.checked) {
                        obj.checked = true;
                        //记录id和value
                        selectCheckBox(obj);
                    }
                }
            }
        }

        if (msg_id != null) {
            var obj = document.getElementById(msg_id);
            var msg = "全选";
            if (!flag) {
                msg = "反选";
            }
            obj.innerHTML = msg;
        }
    }

    //判断多选框是否本选中
    //为ture ：则是反选，需要去掉所有的checked
    //为false：则是全选，需要加上所有的checked
    function isAllChecked() {
        var flag = true;
        //index :选择器的index位置,即当前元素的索引,从0开始
        //domEle:当前的元素(也可使用 "this" 选择器)
        $(":checkbox").each(function(index, domEle) {
            //判断是否有未选中的
            if (!$(domEle).attr("checked")) {
                if (document.getElementById("td_selected_all").innerHTML == "全选") {
                    flag = false;
                    return false;
                } else {
                    flag = true;
                    return false;
                }
            }
        });
        return flag;
    }

</script>

 

posted @ 2017-04-18 16:07  苍  阅读(454)  评论(0)    收藏  举报