<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head> < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title>jQuery实现的全选、全不选、反选</title> < script language="javascript" type="text/javascript" src="../include/jquery.js"></script> <script language="javascript" type="text/javascript"> //使用jquery加载事件 $(document).ready(function (){ //设置全选 $("#all-yes").click(function (){ $("input[name=fav]").attr("checked","checked"); }); //设置全不选 $("#all-no").click(function (){ $("input[name=fav]").attr("checked",false); }); //设置反选 $("#fanxuan").click(function (){ //获得所有的爱好的复选框 $("input[name=fav]").each(function (){ //获得每一个复选框的选中状态,如果已选中,则改为未选中状态, //如果未选中,则改为选中状态 //this 是dom对象,$(this)将this转换为jquery对象,调用attr()的方法 if(this.checked){ //封装成jquery对象,并且设置checked的值 $(this).attr("checked",false); }else{ $(this).attr("checked","checked"); } }); }); //添加 全选/全不选 的事件 $("#isAll").click(function (){ if(this.checked){ //封装成jquery对象,并且设置checked的值 $("input[name=fav]").attr("checked",true); }else{ $("input[name=fav]").attr("checked",false); } }); }); </script> </head> <body> < form action="" method="post"> 请选择你的爱好:<br> < input type="checkbox" id="isAll" value="全选/全不选"/>全选/全不选 <br> <input type="checkbox" name="fav" value="看小说"/>看小说 <input type="checkbox" name="fav" value="音乐"/>音乐 <input type="checkbox" name="fav" value="吃大餐"/>吃大餐 <input type="checkbox" name="fav" value="电影"/>电影 <br> < input id="all-yes" value="全选" type="button" /> < input id="all-no" value="全不选" type="button" /> < input id="fanxuan" value="反选" type="button" /> </form> < /body> < /html>