javascript - 为两个不同的动态生成的列表选择全部按钮

Question

我有两个通过 xQuery 生成的无序列表(一个按频率排序，另一个按字母顺序排序)。默认显示频率排序列表，而字母列表通过 Javascript 隐藏。然后，用户可以选择单击链接来显示字母列表，然后隐藏频率列表。用户可以在列表之间来回切换。两个列表都显示在 Colorbox 弹出窗口中。

我需要向每个列表添加复选框，并包含一个在每个列表的“全选”/“全部清除”之间切换的按钮。我的问题是，当我查看频率排序列表时，单击“全选”，然后单击链接查看字母列表，所有值仍处于选中状态，并且切换按钮文本更改回“全选”。当我现在单击“全选”按钮时，文本会切换回“全部清除”，但不会取消选中复选框。

当用户在两个列表之间切换时，是否有办法让复选框“重置”？这样，当他们单击字母列表时，所有复选框均未选中，并且按钮显示“全选”？

代码如下:

    $(document).ready(function(){
     $('.select-all:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('Clear All');
      event.preventDefault();
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('Select All');
      event.preventDefault();        
    })
  })

    <li>
    <input type="checkbox">{$display-value}</input>
    </li>

    <input type="button" value="Select all" class="select-all"></input>,
    <input type="submit" value="Submit"></input>

Answer 1

为什么您不能像您已经使用的toggle功能一样对待您的两个列表显示？当显示任何列表时，第一步是选择所有为复选框的子节点并删除选中的属性。

或者，编写一个函数，该函数接受父元素并在其下方遍历以查找子复选框并取消选中它们。当您拉出第一个列表时，首先调用此函数，或者在两者之间切换。

您的问题中是否有部分我不明白？这看起来微不足道，特别是因为您的示例中的代码基本上可以满足您的要求:)