代码:有bug,不要一起用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.8.0.min.js"></script> </head> <body> <script> $(function() { //全选/全不选 $("#all").click(function() { $("[name=items]:checkbox").prop("checked", this.checked); }); $("[name=items]:checkbox").click(function() { var flag = true; $("[name=items]:checkbox").each(function() { if(!this.checked) { flag = false; } }); $("#all").attr("checked", flag); }) //全选 $("#selectAll").click(function() { $("[name=items]:checkbox").each(function() { $(this).attr("checked", true); }); }); //全不选 $("#unSelect").click(function() { $("[name=items]:checkbox").each(function() { $(this).attr("checked", false); }); }); //反选 $("#reverse").click(function() { $("[name=items]:checkbox").each(function() { //遍历每一个复选框 //$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值 this.checked = !this.checked; //js方法 }); }); //输出选中的值 $("#btn").click(function() { var str = "你选中的是:\r\n"; $("[name=items]:checkbox:checked").each(function() { str += $(this).val() + "\r\n"; }); alert(str); }); }) </script> <ul id="list"> <li><label><input type="checkbox" name="items" value="1"> 一 </label></li> <li><label><input type="checkbox" name="items" value="2"> 二 </label></li> <li><label><input type="checkbox" name="items" value="3"> 三 </label></li> <li><label><input type="checkbox" name="items" value="4"> 四 </label></li> <li><label><input type="checkbox" name="items" value="5"> 五 </label></li> <li><label><input type="checkbox" name="items" value="6"> 六 </label></li> </ul> <input type="checkbox" id="all"> 全选/全不选</br> <input type="button" value="全选" class="btn" id="selectAll"> <input type="button" value="全不选" class="btn" id="unSelect"> <input type="button" value="反选" class="btn" id="reverse"> <input type="button" value="获得选中的所有值" id="btn" id="getValue"> </body> </html>