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

最新推荐文章于 2022-01-10 11:00:58 发布

原创最新推荐文章于 2022-01-10 11:00:58 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #函数 #实例

JavaScript && Html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的网页应用，使用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>