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

jquery的全选,全不选,反选

时间:2016-07-09 23:37:41      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

jquery的全选,全不选,反选:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryselect.aspx.cs" Inherits="WebApplication9.jqueryselect" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script 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的全选,全不选,反选

标签:

原文地址:http://www.cnblogs.com/zhumeiming/p/5656804.html

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