一个checkbox 用jquery实现全选、全不选
之前因为一个很小的错误弄了很久，现在才做好。
效果图：
肯定还有更简单的方法。
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>
