<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery Demo</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ //全选/全不选 $("#checkAllOrNo").click(function(){ $("[name=items]:checkbox").attr("checked",this.checked); }); //全选 $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked",true); }); //全不选 $("#checkNo").click(function(){ $("[name=items]:checkbox").attr("checked",false); }); //反选 $("#checkReverse").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked=!this.checked; }); }); }); </script> </head> <body> <form> <input type="checkbox" name="checkItems" id="checkAllOrNo" value="全选/全不选"/>全选/全不选 <br /> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="游泳"/>游泳 <input type="checkbox" name="items" value="唱歌"/>唱歌 <br> <input type="button" name="checkall" id="checkAll" value="全选" /> <input type="button" name="checkall" id="checkNo" value="全不选" /> <input type="button" name="checkall" id="checkReverse" value="反选" /> </form> </body> </html>
两个select 内容相互移动
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery Demo</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ //左移一个 $("#left").click(function(){ $("#first option:selected").appendTo("#second"); }); //全部左移 $("#left_all").click(function(){ $("#first option").appendTo("#second"); }); //右移一个 $("#right").click(function(){ $("#second option:selected").appendTo("#first"); }); //全部右移 $("#right_all").click(function(){ $("#second option").appendTo("#first"); }); //双击左移 $("#first").dblclick(function(){ $("#first option:selected").appendTo("#second"); }); //双击右移 $("#second").dblclick(function(){ $("#second option:selected").appendTo("#first"); }); }); </script> </head> <body> <form action="" method="post"> <table border="1"> <tr> <td> <select name="first" size="10" multiple="multiple" id="first"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td valign="middle"> <input name="left" id="left" type="button" value="左移一个" /><br/> <input name="left_all" id="left_all" type="button" value="全部左移" /><br/> <input name="right" id="right" type="button" value="右移一个" /><br/> <input name="right_all" id="right_all" type="button" value="全部右移" /> </td> <td> <select name="second" size="10" multiple="multiple" id="second"> <option value="选项9">选项9</option> </select> </td> </tr> </table> </form> </body> </html>