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

一个checkbox 用jquery实现全选、全不选

时间:2014-06-07 21:16:26      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

之前因为一个很小的错误弄了很久,现在才做好。

效果图:

bubuko.com,布布扣

肯定还有更简单的方法。

bubuko.com,布布扣
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="WebApp.Test.Checkbox" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <script src="../Scripts/jquery-1.8.0.min.js"></script>
10     <script type="text/javascript">
11         $(function () {
12             jQueryCheckAll();
13         })
14         function jQueryCheckAll() {
15             var checkAll = $(#checkedAll);
16             var items = $(:checkbox[name=item]);
17            
18             checkAll.click(function () {
19                 if ($(this).attr(checked)) {
20                     items.each(function () {
21                         $(this).attr(checked, true);
22                     })                  
23                 }
24                 else {
25                     items.each(function () {
26                         $(this).attr(checked, false);
27                     })
28                 }
29                 items.click(function () {
30                     checkAll.attr("checked", items.length == $(:checkbox[name=item]:checked).length ? true : false);
31                 });
32             })      
33         }      
34     </script>
35 </head>
36 <body>
37     <form id="form1" runat="server">
38         <div>
39             你爱好的运动是?
40             <input type="checkbox" id="checkedAll"/>全选/全不选<br/>
41             <input type="checkbox" name="item" value="足球" />足球
42             <input type="checkbox" name="item" value="篮球" />篮球
43             <input type="checkbox" name="item" value="羽毛球" />羽毛球
44             <input type="checkbox" name="item" value="乒乓球" />乒乓球
45         </div>
46     </form>
47 </body>
48 </html>
bubuko.com,布布扣

 

一个checkbox 用jquery实现全选、全不选,布布扣,bubuko.com

一个checkbox 用jquery实现全选、全不选

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/gbnw/p/3774904.html

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