向同一表单/列表添加另一个jquery函数不起作用

我发现jquery函数有一个问题，它不工作，允许我选中/取消选中所有复选框。 我认为它不起作用，因为另一个jquery函数阻塞了它的功能

所以我得到了一个表单，它有4个“主题”和一个复选框下拉列表。为了让复选框“下拉”，我添加了一个jquery函数。不过，我还希望在4个主题下拉列表中的每个主题中都包含一个选择/取消选择所有复选框

因此，我的html代码如下所示： 注意：我只在列表4中粘贴了第四个主题下拉列表的html代码

应选择/取消选择所有复选框的Jquery代码如下：

但这不起作用，列表代码的下拉列表起作用，但选择/取消选择代码不起作用。。另外，当我将选择/取消选择代码粘贴到下拉代码之前时，则下拉代码不起作用

---

有什么建议吗？提前谢谢

您有一个简单的打字错误：

i、 e.您有$'select\u all'而不是$'select-all'，因此它与id不匹配

但我将继续进行完整的重写，以展示如何更好地完成其中的一些工作

选择所有jQuery方式： 编写此“全选”行为的更好方法是使用“最近”查找所单击复选框的共同祖先，然后选中所有相关复选框。此示例适用于页面上任意数量的复选框列表

$('.select-all').change(function (event) {
    var $list = $(this).closest('.dropdown-check-list');
    $list.find(':checkbox').prop('checked', $(this).prop('checked'));
});

注意，我必须使用一个类而不是一个id来选择所有复选框，因为id必须是唯一的，并且在jQuery中不太有用

更新： 一旦我明白了它的作用，我就用以下代码替换了整个第一块Javascript/jQuery代码：

注:

您可以使用“单击”或“更改”复选框，但如果您使用代码模拟单击，则会产生副作用。我使用变更仅仅是因为它看起来更合适。 在可能的情况下，您应该使用类，因为ID是唯一的，不太有用。示例中的ID实际上并不需要/使用。

---

我的建议是从端到端学习jQuery，并尽可能改进/缩短/简化现有的Javascript代码。

第一块代码是我见过的最不使用jQuery的jQuery代码：如果要使用jQuery，请在大多数操作中使用jQuery。后续：使用jQuery，第一块代码可以减少约80%，但我不能百分之百确定它的实际用途。你能解释一下它的用途吗？谢谢你的回复！关于你的建议，是的，我仍然需要深入研究Jquery代码！谢谢

var checkList = document.getElementById('list1');
        checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (checkList.classList.contains('visible'))
                checkList.classList.remove('visible');
            else
                checkList.classList.add('visible');
        }

        var checkList2 = document.getElementById('list2');
        checkList2.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (checkList2.classList.contains('visible'))
                checkList2.classList.remove('visible');
            else
                checkList2.classList.add('visible');
        }

        var checkList3 = document.getElementById('list3');
        checkList3.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (checkList3.classList.contains('visible'))
                checkList3.classList.remove('visible');
            else
                checkList3.classList.add('visible');
        }

        var checkList4 = document.getElementById('list4');
        checkList4.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (checkList4.classList.contains('visible'))
                checkList4.classList.remove('visible');
            else
                checkList4.classList.add('visible');
        }

$('#select_all').click(function(event) {
        if(this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
            this.checked = true;
            });
        }
        else {
            $(':checkbox').each(function() {
            this.checked = false;
            });
        }
     });

$('.select-all').change(function (event) {
    var $list = $(this).closest('.dropdown-check-list');
    $list.find(':checkbox').prop('checked', $(this).prop('checked'));
});

$('.dropdown-check-list .anchor').click(function(){
    $(this).closest('.dropdown-check-list').toggleClass("visible");
});