動態產生的選項清單（Checkbox List）需要透過附加對應的 onChange 事件來彼此控制選取狀態，本文將介紹如何簡單且快速的透過 JQuery Selector 的應用來達到預期的結果。
HTML 選項清單的程式碼
首先，當我們希望勾選 / 取消勾選【全部】的 Checkbox 時會連帶影響【其他選項】的 Checked 狀態；反之，如果【其他選項】被勾選時，也會影響【全部】選項的 Checked 狀態，這時候我們就需要為這些 Checkbox 各自 Binding onChange 事件，以下則是預設的 HTML 選項清單：
<label>
<input type="checkbox" name="status" value="0" checked="checked">全部
</label>
<label>
<input type="checkbox" name="status" value="1" checked="checked">待付款
</label>
<label>
<input type="checkbox" name="status" value="2" checked="checked">待確認
</label>
<label>
<input type="checkbox" name="status" value="3" checked="checked">待出貨
</label>
<label>
<input type="checkbox" name="status" value="4" checked="checked">待收貨
</label>
<label>
<input type="checkbox" name="status" value="5" checked="checked">待評價
</label>
<label>
<input type="checkbox" name="status" value="6" checked="checked">已完成
</label>
JavaScript 的程式碼 - Binding 【全部】Checkbox 的 onChange 事件
規則：勾選 / 取消勾選【全部】的 Checkbox 時會連帶影響【其他選項】的 Checked 狀態：
$('input[name="status"]:checkbox:eq(0)').change(function () {
// 取得「其他選項」CheckBox
var checkboxes = $('input[name="status"]:checkbox:gt(0)');
// 「其他選項」CheckBox 會依據「全部」CheckBox 的 Checked 狀態改變
$(this).is(':checked') ? checkboxes.prop('checked', 'checked') : checkboxes.removeAttr('checked');
});
JavaScript 的程式碼 - Binding 【其他選項】Checkbox 的 onChange 事件
規則：當【其他選項】都選取時，【全部】會被勾選；當【其他選項】有任一個未被勾選時，【全部】則不會被勾選。
$('input[name="status"]:checkbox:gt(0)').change(function () {
// 判斷「其他選項」CheckBox 的 Checked 狀態是否全勾選, 如果全勾選即將「全部」Checkbox 勾選
if ($('input[name="status"]:gt(0):checked').length == ($('input[name="status"]:checkbox:gt(0)').length)) {
$('input[name="status"]:checkbox:eq(0)').prop("checked", "checked");
} else {
$('input[name="status"]:checkbox:eq(0)').removeAttr("checked");
}
});