首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 软件管理 > 软件架构设计 >

jQuery(五)-实现checkbox的全选,反选,全不选功能

2013-03-21 
jQuery(5)--实现checkbox的全选,反选,全不选功能页面如下: 源码:!DOCTYPE HTML PUBLIC -//W3C//DTD HTML

jQuery(5)--实现checkbox的全选,反选,全不选功能

页面如下:

jQuery(五)-实现checkbox的全选,反选,全不选功能

 

源码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>demo04.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->   <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>      <script type="text/javascript">       $(document).ready(function(){                 $("#ckbAll").click(function(){                 $("input[name='fav']").attr("checked",true);          });                    $("#ckbno").click(function(){              $("input[name='fav']").attr("checked",false);          });                    $("#ckbrec").click(function(){                        $("input[name='fav']").each(function(){                  // $(this).attr("checked",!$(this).attr("checked"));              this.checked=!this.checked;//用的是Dom的属性              });                        });       });</script>  </head>      <body>      <div>          <input type="checkbox" name="fav" value="看书1" checked="checked"/>看书1          <input type="checkbox"  name="fav"  value="看书2" checked="checked"/>看书2          <input type="checkbox"  name="fav"  value="看书3" checked="checked"/>看书3          <input type="checkbox"   name="fav" value="看书4" checked="checked"/>看书4      </div>            <div>         <input type="button" id="ckbAll" value="全选"/><br/><br/>         <input type="button" id="ckbno" value="全不选"/><br/><br/>         <input type="button" id="ckbrec" value="反选"/><br/>      </div>  </body></html>


 

热点排行