javascript - 复选框列表未将所有设置为选中

Question

我在查找代码中出错的地方时遇到问题。我在列表底部动态填充了一个带有“SelectAll”列表项的复选框列表。

当我切换列表项“SelectAll”并将全部设置为选中或不选中时，一切正常，所有列表项都会相应更改。但是，如果我在选择 SelectAll 项目之前选择了其他列表项之一，则该项目将不再在后续的 SelectAll 操作中切换。

   var Activities = " Hiking,Boating,Camping,Music,Theater,News,Biking,Market,History ";
    var selectAllText = "SelectAll";

    function InitializeListItems() {
        var splits = Activities.split(",");
        splits.sort();

        for (var i = 0; i < splits.length; i++) {

            AddListItem(splits[i] );
        }
        AddListItem(selectAllText )
    }  


 function AddListItem(name ) {

        var li = " <li >   " +

           "<label style='border:none; padding-left:5px'> <input 
                   type='checkbox' value='" + name + "' id='" + name + "ID'    > " +
           name + "</label>   </li>";

        document.getElementById('FilterList').innerHTML += li
    }

    $(document).on('click', '#FilterList li', function () {

        var ip = $(this).find('input');
        ip.each(function () {
            if ($(this).is(":checked")) {

                if ($(this).attr('value') == selectAllText) {
                    $('#FilterList').find('input').attr('checked', true);

                }
            }
            else {
                if ($(this).attr('value') == selectAllText) {
                    $('#FilterList').find('input').attr('checked', false);

                }
            }
        });




    });

Answer 1

在您想要的任何事件上调用该函数。

var checkboxes = doc.querySelector('input[name="mycheckboxes"]');

function uncheck(elements){
  for (var i = 0; i < itemRows.length; i++) {
    checkboxes[i].checked = false;
  }
}

function check(elements){
  for (var i = 0; i < itemRows.length; i++) {
    checkboxes[i].checked = true;
  }
}