如何在一个函数下合并javascript中的加载事件和更改事件?

Question

我的html代码用于一捆checkboxes。 我有一些像这样的checkboxes包，具有不同的类名。我在这里展示了一个捆绑包。

<ul>
<li><input class="TestAll" type="checkbox" id="select_all"/> Selecct All</li>
<li><input class="Test" type="checkbox"> This is Item 1</li>
<li><input class="Test" type="checkbox"> This is Item 2</li>
<li><input class="Test" type="checkbox"> This is Item 3</li>
<li><input class="Test" type="checkbox"> This is Item 4</li>
<li><input class="Test" type="checkbox"> This is Item 5</li>
<li><input class="Test" type="checkbox"> This is Item 6</li>
</ul>

我的javascript如下所示

<script type="text/javascript">
function Selection(id, name) {
var ALL = document.getElementById(id);
var Single = document.getElementsByClassName(name);
ALL.addEventListener("change", function (e) {
for (i = 0; i < Single.length; i++) {
Single[i].checked = ALL.checked;
}
});
for (var i = 0; i < Single.length; i++) {
Single[i].addEventListener('change', function (e) {
if (this.checked == false) {
ALL.checked = false;
}
if ($('.' + name + ':checkbox:checked').length == Single.length) {
ALL.checked = true;
}
});
}
}
//    window.onload = Selection;
</script>

在这里，我获取"选择所有"checkbox的 ID，并为其他classnamecheckboxes

<script type="text/javascript">
Selection('select_all', 'Test');
</script>

此函数用于创建页面。以下函数用于编辑页面。

function SelectionOnLoad(id, name) {
var all = document.getElementById(id);
var single = document.getElementsByClassName(name);
if ($('.' + name + ':checkbox:checked').length == single.length) {
all.checked = true;
}
else {
all.checked = false;
}
}
$(document).ready(function () {
SelectionOnLoad('select_all', 'Test');         
});

有没有办法在一个函数下执行这些分离的功能......有什么建议吗？

Answer 1

如果我理解你的意思正确，你可能想使用这个函数：

function selectionOnload(id, name) {
var all = document.getElementById(id);
var single = document.getElementsByClassName(name);
if ($('.' + name + ':checkbox:checked').length == single.length) {
all.checked = true;
}
all.addEventListener("change", function(e) {
for (i = 0; i < single.length; i++) {
single[i].checked = all.checked;
}
});
for (var i = 0; i < single.length; i++) {
single[i].addEventListener('change', function(e) {
if ($('.' + name + ':checkbox:checked').length == single.length) {
all.checked = true;
} else {
all.checked = false;
}
});
}
};
$(document).ready(function() {
selectionOnload('select_all', 'Test');
});

提示： 我们只需要选中是否选中所有复选框1次即可。如果是，请将checked属性设置为all。否则，它将false.

我们还可以在selectionOnload函数中编写事件/