<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选、全不选、反选</title> <style type="text/css"> #choose input { display: block; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $choose = $("#choose input"); //全选 $("#all").click(function(){ $choose.each(function(){ $(this).prop("checked",true); }); }); //全不选 $("#not").click(function(){ $choose.prop("checked",false); }); //反选 $("#reverse").click(function(){ $choose.each(function(){ $(this).prop("checked",!$(this).prop("checked")); }); }); }); </script> </head> <body> <div id="box-function"> <input id="all" type="button" value="全选" /> <input id="not" type="button" value="全不选" /> <input id="reverse" type="button" value="反选" /> </div> <div id="choose"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> </body> </html>