javascript - 选中导航选项卡中的所有复选框

Question

我创建了一个 checkAll 函数，但是当我在导航选项卡中使用它时，它还会从不活动的选项卡中选择复选框，而我不希望这样。我怎样才能让这项工作正常进行？

这是我用来检查所有内容的按钮:

<%= button_tag("Check", type:"button", onclick:"checkAll();", id:"check_all",class:"btn btn-default") do %>
   <i class="far fa-check-square"></i>
<% end %>

我的咖啡功能:

@checkAll = ->
$('input[type="checkbox"]').click()
return

还有我的选项卡，在其中我正在渲染表格，这就是复选框所在的位置。

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <% @sectors.each do |sector| %>
        <li class="nav-item">
            <a
                <% if sector.name == "Chapa" %>
                    class="nav-link show active"
                <% else %>
                    class="nav-link"
                <% end %>
                id="<%=sector.name%>-tab" data-toggle="tab" href="#<%=sector.name%>" role="tab" aria-controls="<%=sector.name%>" aria-selected="true"><%=sector.name%>
            </a>
        </li>
    <% end %>
</ul>

<div class="tab-content" id="myTabContent">
    <% @sectors.each do |sector| %>
        <div
            <% if sector.name == "Chapa" %>
                class="tab-pane fade show active"
            <% else %>
                class="tab-pane fade"
            <% end %>
                id="<%=sector.name%>" role="tabpanel" aria-labelledby="<%=sector.name%>-tab">
            <%= render "table", items: @items[sector.name], sector: sector %>
        </div>
    <% end %>
</div>

Answer 1

您的 JavaScript 代码按预期工作。 $('input[type="checkbox"]').click() 表示:点击所有复选框输入。

要实现您想要的效果，您只需选择事件选项卡内的输入，例如:

$('.tab-content.active').find('input[type="checkbox"]').click();

或者如果按钮位于 tab-content 内，则:

$(this).parents('.tab-content').find('input[type="checkbox"]').click();

上面的代码将:
- 查找具有 .tab-content 类的 $(this) (这是一个按钮)的父级
- 在父级中，找到所有复选框
- 单击它们