jQuery操作checkbox选择-优快云博客

1、checkbox list选择

效果图：

代码：

<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Scripts/jquery-1.7.min.js"
 type="text/javascript"></script>

    <script type="text/javascript">

        $(function
 () {

            //
 全选

            $("#btnCheckAll").bind("click",
 function () {

                $("[name
 = chkItem]:checkbox").attr("checked", true);

            });

            //
 全不选

            $("#btnCheckNone").bind("click",
 function () {

                $("[name
 = chkItem]:checkbox").attr("checked", false);

            });

            //
 反选

            $("#btnCheckReverse").bind("click",
 function () {

                $("[name
 = chkItem]:checkbox").each(function () {

                    $(this).attr("checked",
 !$(this).attr("checked"));

                });

            });

            //
 全不选

            $("#btnSubmit").bind("click",
 function () {

                var
 result = new Array();

                $("[name
 = chkItem]:checkbox").each(function () {

                    if
 ($(this).is(":checked")) {

                        result.push($(this).attr("value"));

                    }

                });

                alert(result.join(","));

            });

        });

    </script>

</head>

<body>

    <div>

        <input name="chkItem"
 type="checkbox" value="今日话题" />今日话题

        <input name="chkItem"
 type="checkbox" value="视觉焦点" />视觉焦点

        <input name="chkItem"
 type="checkbox" value="财经" />财经

        <input name="chkItem"
 type="checkbox" value="汽车" />汽车

        <input name="chkItem"
 type="checkbox" value="科技" />科技

        <input name="chkItem"
 type="checkbox" value="房产" />房产

        <input name="chkItem"
 type="checkbox" value="旅游" />旅游

    </div>

    <div>

        <input id="btnCheckAll"
 type="button" value="全选" />

        <input id="btnCheckNone"
 type="button" value="全不选" />

        <input id="btnCheckReverse"
 type="button" value="反选" />

        <input id="btnSubmit"
 type="button" value="提交" />

    </div>

</body>

</html>

2、checkbox table选中

效果图：

代码：

<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        table

        {

            border-collapse:
 collapse;

        }

        td

        {

            border:
 1px solid #ccc;

        }

    </style>

    <script src="Scripts/jquery-1.7.min.js"
 type="text/javascript"></script>

    <script type="text/javascript">

        $(function
 () {

            //
 chkAll全选事件

            $("#chkAll").bind("click",
 function () {

                $("[name
 = chkItem]:checkbox").attr("checked", this.checked);

            });

            //
 chkItem事件

            $("[name
 = chkItem]:checkbox").bind("click", function () {

                var
 $chk = $("[name = chkItem]:checkbox");

                $("#chkAll").attr("checked",
 $chk.length == $chk.filter(":checked").length);

            })

        });

    </script>

</head>

<body>

    <table id="tb">

        <thead>

            <tr>

                <td>

                    <input id="chkAll"
 type="checkbox" />

                </td>

                <td>

                    分类名称

                </td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    <input name="chkItem"
 type="checkbox" value="今日话题" />

                </td>

                <td>

                    今日话题

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem"
 type="checkbox" value="视觉焦点" />

                </td>

                <td>

                    视觉焦点

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem"
 type="checkbox" value="财经" />

                </td>

                <td>

                    财经

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem"
 type="checkbox" value="汽车" />

                </td>

                <td>

                    汽车

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem"
 type="checkbox" value="科技" />

                </td>

                <td>

                    科技

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem"
 type="checkbox" value="房产" />

                </td>

                <td>

                    房产

                </td>

            </tr>

            <tr>

                <td>

                    <input name="chkItem"
 type="checkbox" value="旅游" />

                </td>

                <td>

                    旅游

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>