jquery全选,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>  

 

 

posted on 2013-04-27 22:32  娜些事儿  阅读(316)  评论(0编辑  收藏  举报

导航

分享到: QQ空间 新浪微博