jQuery提供了擴展接口jQuery.extend(Object)和jQuery.fn.extend(Object)，前者是在jQuery對象上進行擴展（同jQuery的工具方法），而後者是在jQuery對象實例集上進行擴展（通常用於制作jQuery插件）。
1.問題引入：
上圖一看就明白了需求。
點擊全選，一組復選框全部選中；
取消全選，一組復選框全部未選中；
選中一組復選框中任意一個，如果一組復選框全選中，全選框選中，否則全選框為選中。
2.實現思路
全選框改變時，更加全選框的狀態，更新一組復選框狀態；
一組復選框中任意一個改變狀態時，檢查一組復選框的狀態，如果檢查結果是一組復選框全選中，更新全選框為選中狀態，否則更新全選框為未選中狀態。
3. 具體實現和使用
下文中通過對jQuery.fn.extend(Object)進行擴展來實現需求，並且使用jQuery.extend(Object)將上述需求擴展為jQuery對象上的一個方法。
HTML頁面代碼：
<!DOCTYPE html>
<html>
<head>
<title>測試 jQuery extend 方法 和checkbox全選和全取消</title>
<style type="text/css">
body {
background-color: #eef;
}
div {
width: 800px;
height: 100px;
font-weight: 10;
}
</style>
<!--<script type="text/javascript" src="../../script/jquery/jquery-1.8.0.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../../i_script/jslib/jquery.checkbox.plugins.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$.checkboxHandler("sport");
})
</script>
<fieldset>
<input type="checkbox" id="sport" value="全選"/>全選<br/>
<input type="checkbox" name="sport" id="c1" value="足球"/><label for="c1">足球</label><br/>
<input type="checkbox" name="sport" id="c2" value="籃球"/><label for="c2">籃球</label><br/>
<input type="checkbox" name="sport" id="c3" value="乒乓球"/><label for="c3">乒乓球</label><br/>
<input type="checkbox" name="sport" id="c4" value="羽毛球"/><label for="c4">羽毛球</label><br/>
</fieldset>
</body>
</html>
說明：
引入JavaScript文件，包括jquery和下面將要封裝的功能代碼；
頁面定義一組復選框，並且單獨定義一個復選框（該復選框的id屬性值和其要操作的一組復選框的name屬性值一致，如上：sport）；
全選框和一組復選框具備了如上所述命名規范，即可以作為一個整體操作，完成 1 中需求功能只需要為插件提供一個能夠唯一標識這一組復選框的id，如:"sport"；
使用時僅需要在頁面加載完成後調用jQuery擴展的對象方法jQuery.checkboxHandler(id)即可。
下面是jQuery擴展實現上述功能的代碼：
/**
* Created with JetBrains WebStorm.
* User: http://www.linuxidc.com
* Date: 14-3-14
* Time: 下午2:08
* 增強jQuery中對checkbox的處理，可以對一組checkbox進行全選，全不選操作
* 需要jQuery支持
* -------------Notice-------------
* 使用jQuery.checkboxHandler(id)方法對一組checkbox添加事件
* id:
* id的值是一組類型是checkbox的input的name屬性值，
* 並且作為全選和全不選類型是checkbox的input的id屬性值
*
* Simple:
* $(document).ready(function () {
$.checkboxHandler("sport");
})
*/
(function ($) {
jQuery.fn.extend({
checkboxSelected: function () {
var id = $(this).attr('id');
var flag = (typeof $(this).attr('checked') === 'undefined' ) ? true : false;
$("input[type=checkbox][name=" + id + "]").each(function (i, n) {
if (flag) {
$(n).removeAttr("checked");
} else {
$(n).attr('checked', "checked");
}
})
},
checkboxCheck: function () {
var id = $(this).attr('name');
var flag = false;
$("input[type=checkbox][name=" + id + "]").each(function (i, n) {
if (typeof $(n).attr("checked") === 'undefined') {
flag = true;
return false;
}
})
if (flag) {
$("#" + id).removeAttr("checked");
} else {
$("#" + id).attr("checked", "checked");
}
}
})
jQuery.extend({
checkboxHandler: function (id) {
$("#" + id).bind("click", function () {
$(this).checkboxSelected();
});
$("input[type=checkbox][name=" + id + "]").bind("click", function () {
$(this).each(function (i, n) {
$(n).checkboxCheck();
})
})
}
})
})(jQuery);
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡
