码迷,mamicode.com
首页 > Web开发 > 详细

Jquery全选,Jquery全不选,Jquery反选

时间:2014-07-12 16:20:06      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   cti   

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></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>  

 

Jquery全选,Jquery全不选,Jquery反选,布布扣,bubuko.com

Jquery全选,Jquery全不选,Jquery反选

标签:style   blog   http   java   color   cti   

原文地址:http://www.cnblogs.com/shcolo/p/3838310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!