如何仅选中当前可见的Inbox/Compose/Sent元素内的复选框？

我正在处理一个HTML文档，其中包含3个分别带有Inbox、Compose、Sent ID的元素。同一时间仅显示一个元素（通过CSS的display:none属性隐藏另外2个），并借助HTML按钮和jQuery实现切换。所有元素内均包含复选框，但我需要仅选中当前可见元素内的复选框，现有代码会选中HTML文档中的所有复选框，请问该如何实现？

现有代码如下：

$('.checkbox-toggle').click(function (){
    var clicks = $(this).data('clicks')
    if (clicks) {
        //Uncheck all checkboxes
    } else {
       //Check all checkboxes
    }
  }

核心是通过:visible选择器定位当前显示的容器，仅对该容器内的复选框进行操作，避免选中全局所有复选框。

修改后的代码如下：

$('.checkbox-toggle').click(function (){
    var clicks = $(this).data('clicks');
    // 精准获取当前可见的容器（Inbox/Compose/Sent中的一个）
    var visibleContainer = $('#Inbox, #Compose, #Sent').filter(':visible');
    
    if (clicks) {
        // 取消选中当前可见容器内的所有复选框
        visibleContainer.find('input[type="checkbox"]').prop('checked', false);
    } else {
        // 选中当前可见容器内的所有复选框
        visibleContainer.find('input[type="checkbox"]').prop('checked', true);
    }
    // 切换按钮的点击状态，实现选中/取消的循环
    $(this).data('clicks', !clicks);
});

关键说明： #

• $('#Inbox, #Compose, #Sent').filter(':visible')：筛选出当前处于显示状态的容器元素
• find('input[type="checkbox"]')：仅选中该容器内部的复选框，不会影响其他隐藏容器里的元素
• prop('checked', 状态)：通过prop方法设置复选框的选中状态，这是jQuery操作表单元素状态的标准方式
• 最后必须切换data('clicks')的布尔值，保证按钮可以在“全选”和“取消全选”之间交替生效

内容的提问来源于stack exchange，提问作者mpiers110