<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>全选练习</title><script type=\"text/javascript\" src=\"jQuery.js\"></script><script type=\"text/javascript\">$(function(){//1.#checkedAllBtn 设置全选$(\'#checkedAllBtn\').click(function(){$(\'.ckb\').prop(\'checked\',true);$(\'#checkedAllBox\').prop(\'checked\',true);});//2.#checkedNoBtn 设置全不选$(\'#checkedNoBtn\').click(function(){$(\'.ckb\').prop(\'checked\',false);$(\'#checkedAllBox\').prop(\'checked\',false);});//3.#checkedRevBtn 设置反选$(\'#checkedRevBtn\').click(function(){//先让全选框选中，本事件最后面再判断要不要取消$(\'#checkedAllBox\').prop(\'checked\',true);$(\".ckb\").each(function () {$(this).prop(\"checked\", !$(this).prop(\"checked\"));});//判断var cv=true;$(\".ckb\").each(function () {if(!$(this).prop(\"checked\")){cv=false;}});$(\'#checkedAllBox\').prop(\'checked\',cv);});//4.#checkedAllBox 设置全选/全不选$(\'#checkedAllBox\').click(function(){var checkV=$(this).prop(\'checked\');$(\'.ckb\').prop(\'checked\',checkV);});//5.items 解决4的bug(上级影响下级,但反过来不行)$(\'.ckb\').click(function(){var cv=true;$(\".ckb\").each(function () {if(!$(this).prop(\"checked\")){cv=false;}});$(\'#checkedAllBox\').prop(\'checked\',cv);});});</script></head><body><form method=\"post\" action=\"\">你爱好的运动是？<input type=\"checkbox\" id=\"checkedAllBox\" />全选/全不选<br /><input class=\"ckb\" type=\"checkbox\" name=\"items\" value=\"足球\" />足球<input class=\"ckb\" type=\"checkbox\" name=\"items\" value=\"蓝球\" />蓝球<input class=\"ckb\" type=\"checkbox\" name=\"items\" value=\"羽毛球\" />羽毛球<input class=\"ckb\" type=\"checkbox\" name=\"items\" value=\"兵乓球\" />兵乓球<br /><input type=\"button\" id=\"checkedAllBtn\" value=\"全选\"/><input type=\"button\" id=\"checkedNoBtn\" value=\"全不选\"/><input type=\"button\" id=\"checkedRevBtn\" value=\"反选\"/></form></body></html>
爱站程序员基地
