JQuery(全选与反选功能）

最新推荐文章于 2022-08-29 21:32:04 发布

iteye_3224

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量73

点赞数

文章标签： javascript xhtml ViewUI

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
           
        $(function () {
            /*全选功能的实现*/
            $("#all").click(function () {            
                $(".item").attr("checked", $("#all").prop("checked"));
            });

            /*当checkbox全部被选中时，全选被勾选，否则不配勾选*/
            $(".item").click(function () {
                if ($("input[class='item']:checked").size() == 7) {
                    $("#all").attr("checked", true);
                } else {
                    $("#all").attr("checked", false);
                }
            });

            /*反选功能的实现*/
            $("#ops").click(function () {
                $(".item").each(function () {
                    $(this).attr("checked", !this.checked);
                });
            });
        });

      
    </script>
</head>
<body>
    <label>全选</label><input type="checkbox" id="all" /><br />
    <label>反选</label><input type="checkbox" id="ops" /><br />
    <label>1,</label><input type="checkbox" class="item" /><br />
    <label>2,</label><input type="checkbox" class="item" /><br />
    <label>3,</label><input type="checkbox" class="item" /><br />
    <label>4,</label><input type="checkbox" class="item" /><br />
    <label>5,</label><input type="checkbox" class="item" /><br />
    <label>6,</label><input type="checkbox" class="item" /><br />
    <label>7,</label><input type="checkbox" class="item" /><br />
</body>
</html>