在掌握了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>
以上代碼可以供學習交流直接使用，轉載請聲明來源。