jQuery总结第四天（选择案例解析）

页面如下：

源码：

[html] view plaincopyprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>demo04.html</title>
  6. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7. <meta http-equiv="description" content="this is my page">
  8. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  10. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11. <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
  13. <script type="text/javascript">
  14. $(document).ready(function(){
  16. $("#ckbAll").click(function(){
  17. $("input[name='fav']").attr("checked",true);
  18. });
  20. $("#ckbno").click(function(){
  21. $("input[name='fav']").attr("checked",false);
  22. });
  24. $("#ckbrec").click(function(){
  26. $("input[name='fav']").each(function(){
  27. // $(this).attr("checked",!$(this).attr("checked"));
  28. this.checked=!this.checked;//用的是Dom的属性
  29. });
  31. });
  32. });
  33. </script>
  34. </head>
  37. <body>
  38. <div>
  39. <input type="checkbox" name="fav" value="看书1" checked="checked"/>看书1
  40. <input type="checkbox" name="fav" value="看书2" checked="checked"/>看书2
  41. <input type="checkbox" name="fav" value="看书3" checked="checked"/>看书3
  42. <input type="checkbox" name="fav" value="看书4" checked="checked"/>看书4
  43. </div>
  45. <div>
  46. <input type="button" id="ckbAll" value="全选"/><br/><br/>
  47. <input type="button" id="ckbno" value="全不选"/><br/><br/>
  48. <input type="button" id="ckbrec" value="反选"/><br/>
  49. </div>
  50. </body>
  51. </html>
posted on 2013-03-21 20:17  z流星追月  阅读(132)  评论(0)  编辑  收藏  举报