读书人

JQuery(全选与反选效能)

发布时间: 2012-11-23 00:03:43 作者: rapoo

JQuery(全选与反选功能)

<!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>

读书人网 >Web前端

热点推荐