在网页开发中，经常会遇到需要实现复选框全选功能的场景。这种功能可以极大地提高用户操作的效率。本文将介绍如何使用TypeScript和jQuery来实现这一功能。
首先，需要从GitHub上获取源代码。可以通过以下链接访问并下载：
https://github.com/matthewycso/jquery-select-all.git
下载完成后，会得到一个名为jquery-select-all.js的JavaScript文件，这是从TypeScript编译而来的，用于实现jQueryUI的复选框全选小部件。
要使用这个小部件，需要在网页中添加对jQuery、jQueryUI和jquery-select-all.js文件的引用，如下所示：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="jquery.select-all.js"></script>
<script src="app.js"></script>
在页面的JavaScript部分，需要设置selectall jQuery UI小部件。例如，如果想为id为"selectALL"的复选框添加全选功能，可以按照以下方式操作：
$(function () {
$('#selectALL').selectall({ checkboxSelector: '#chooseFavories :checkbox' });
})
这个小部件有一个选项checkboxSelector，它用于选择所有将被jquery-select-all小部件改变的复选框。
接下来，将介绍如何创建一个具有全选功能的自定义小部件。
在TypeScript中，除了any类型之外，每个类型都需要声明所有属性，否则在编译时会报错。以下是如何扩展现有的jQuery接口以添加新的selectall方法：
(function ($: JQueryStatic) {
$.widget("sforce.selectall", {
options: {
checkboxSelector: null
},
_create: function() {
let target: JQuery = this.element;
let $checkboxes = this.options.checkboxSelector !== null ?
$(this.options.checkboxSelector) :
$(this.element).closest('div, p, td, body').find(':checkbox');
target.addClass("select-all")
.on('change.select-all.sforce', function() {
$checkboxes.not(target).prop('checked', target.prop('checked')).trigger('change');
});
// uncheck "select-all" if any checkbox unchecked
$checkboxes.on('change.select-all.sforce', function() {
if (!$(this).is(target) && !$(this).prop('checked'))
target.prop('checked', false);
});
},
_destroy: function() {
this.element.removeClass("select-all").off('select-all.sforce');
}
});
})(jQuery);
在这段代码中，定义了一个名为sforce.selectall的jQuery小部件，并为其添加了_create和_destroy方法。在_create方法中，首先获取目标元素和所有相关的复选框，然后为它们添加事件监听器。
当目标元素（即全选复选框）的状态发生变化时，所有相关的复选框的状态也会随之改变。同样，如果任何一个相关复选框的状态发生变化，全选复选框的状态也会被重置。
在_destroy方法中，移除了之前添加的类和事件监听器，以确保小部件被正确销毁。
最后，扩展了jQuery接口，添加了一个新的selectall方法，允许以更简洁的方式使用这个小部件。