全选 / 全不选 / 反选
http://www.css88.com/
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="checked"> <input name="checkbox" value="checkbox1" id="checkbox1" type="checkbox"> <input name="checkbox" value="checkbox2" id="checkbox2" type="checkbox"> <input name="checkbox" value="checkbox3" id="checkbox3" type="checkbox"> <input name="checkbox" value="checkbox4" id="checkbox4" type="checkbox"> <input name="checkbox" value="checkbox5" id="checkbox5" type="checkbox"> </div> <input name="button1" id="button1" value="全选" type="submit"> <input name="button2" id="button2" value="全不选" type="submit"> <input name="button3" id="button3" value="反选" type="submit"> <input name="button4" id="button4" value="看看我选择了什么" type="submit"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> (function ($) { $.fn.checkBox = function (state) { this.each(function () { switch (state) { case 'all': $(this).attr("checked", true); break; case 'none': $(this).attr("checked", false); break; case 'toggle': $(this).attr("checked", !this.checked); break; } }); }; $.fn.checkedValue = function () { var str = ''; this.each(function () { str += $(this).val() + ","; }) return str; }; })(jQuery); $(function () { $("#button1").bind("click", function () { $("#checked input[type=checkbox]").checkBox("all"); }); $("#button2").bind("click", function () { $("#checked input[type=checkbox]").checkBox("none"); }); $("#button3").bind("click", function () { $("#checked input[type=checkbox]").checkBox("toggle"); }); $("#button4").bind("click", function () { alert($("#checked input[type=checkbox][checked]").checkedValue()); }); }); </script> </body> </html>