首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQuery(全选与反选效能)

2012-11-23 
JQuery(全选与反选功能)!DOCTYPE htmlhtml xmlnshttp://www.w3.org/1999/xhtmlheadmeta http-eq

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>

热点排行