四川盐亭网站制作公司

jQuery操作checkbox选择代码

<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选择代码
网页路径：http://scyanting.com/article/pcepdo.html

其他资讯