Jquery 全选反选

天然呆的爱死你了呢

浏览: 12007 次

最近访客更多访客>>

海浪儿

wsdxb2008

guangyinren

默雪儿

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

jquery

版权声明：本文为博主原创文章，未经博主允许不得转载。

<!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>
    <title>全选，不全选，反选</title>
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#selectAll").click(function () {//全选
                $("#playList :checkbox").attr("checked", true);
            });

            $("#unSelect").click(function () {//全不选
                $("#playList :checkbox").attr("checked", false);
            });

            $("#reverse").click(function () {//反选
                $("#playList :checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
        });
    </script>
</head>
<body>
    <div id="playList">
        <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>
    <input type="button" value="全选" id="selectAll" />
    <input type="button" value="全不选" id="unSelect" />
    <input type="button" value="反选" id="reverse" />
</body>
</html>

提示：按如上操作还会有个小问题，就是全选，反选按钮只能选择一次，这是因为attr（）方法的问题，更换为prop（）方法即可。（要全部更换哦）

分享到：

validate()验证checkBox | Jquer选取后代元素

2016-09-02 18:36
浏览 489
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论