jQuery操作checkbox选择代码

发布时间：2020-07-01 22:51:03 作者：yj1615
来源：网络阅读：661
<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="分类六" />分类六
    </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>
jQuery操作checkbox选择代码

相关阅读
