您的位置：首页 > Web前端 > JQuery

JQuery 实现checkbox全选、反选、取消

2011-12-11 14:06 561 查看
<!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="jquery-1.3.2.min.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div class="checkboxList">

        <input type="checkbox" value="1" />我是1

        <br />

        <input type="checkbox" value="2" />我是2

        <br />

        <input type="checkbox" value="3" />我是3

        <br />

        <input type="checkbox" value="4" />我是4

        <br />

        <input type="checkbox" value="5" />我是5

        <br />

        <input type="checkbox" value="6" />我是6

    </div>

    <div>

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

        <input type="button" value="取消" id="UnSelect" /> 

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

    </div>

    </form>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#Selecte").click(function() {

                $(".checkboxList :checkbox").attr("checked", true);

            });

            $("#UnSelect").click(function() {

                $(".checkboxList :checkbox").attr("checked", false);

            });

            $("#Reverse").click(function() {

                $(".checkboxList :checkbox").each(function() {

                    var chk = $(this);

                    chk.attr("checked", !chk.attr("checked"));

                });

            });

        });

    </script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery input function button xhtml server
相关文章推荐
新的分享
章节导航