jquery全选，jquery全不选,jquery反选

最新推荐文章于 2022-09-30 14:03:53 发布

原创最新推荐文章于 2022-09-30 14:03:53 发布 · 6.5w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #input #function #button #xhtml #javascript

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用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>