在掌握了jQ的基础知识之后，我们来看看jQ如何复选框的全选全不选反选？
这个最终代码很简洁，其中有不少的注释代码，都是可以作为区别的，其中，最后一端会有使得浏览器奔溃的分险。
直接上代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script></head><body><form action="" method="post" id="love_form">你爱好的运动是?<br /><input class="ball" type="checkbox" value="足球"/>足球<input type="checkbox" value="蓝球"/>篮球<input type="checkbox" value="排球"/>排球<input type="checkbox" value="铅球"/>铅球<br /><input type="button" name="selectAll" id="selectAll" value="全选" /><input type="button" name="selectNotAll" id="selectNotAll" value="全不选" /><input type="button" name="selectBack" id="selectBack" value="反选" /><input type="button" name="submit" id="submit" value="提交" /></form></body><script type="text/javascript">$().ready(function(){//全选$("#selectAll").click(function(){$("input:checkbox").attr("checked","checked");
// alert($("input").attr("checked"));});$("#selectNotAll").click(// 全不选function(){$("#love_form input:checkbox").removeAttr("checked");});$("#selectBack").click(// 反选function(){// 第一种：自定义循环方式
// for (var i = 0;i < $("input:checkbox").size();i++) {
// if($($("input:checkbox").get(i)).attr("checked") == "checked"){
// $($("input:checkbox").get(i)).removeAttr("checked");
// } else{
// $($("input:checkbox").get(i)).attr("checked","checked");
// }
// }
// // 第二种：通过each方法$("input:checkbox").each(function(){
// $(this).attr("checked",!$(this).attr("checked"));// jq方法this.checked = !this.checked;// 第三种：简洁方法});});$("#submit").click(// 提交之后会弹框显示你选择的选项function(){
// var box = $("input:checkbox:checked");
// var str = "你选择的有：";
// for (var i = 0;i < box.size();i++) {
// str = str + box.get(i).value + "\t";
// }
// alert(str);// each方法var str = "你选择的有：";$("input:checkbox:checked").each(function(){
// alert($(this).val());str = str + this.value + "\t";});alert(str);// 一下代码有问题，会使得浏览器崩溃
// alert($("input:checkbox:checked").val());//只会弹出一个
// for (var i=0;$("input").size();i++ ) {
// if ($($("input").get(i)).attr("checked") == "checked") {
// alert($($("input").get(i)).val());
// }
// }});});</script>
</html>
以上代码可以供学习交流直接使用，转载请声明来源。