导航标签中的CheckAll复选框

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) （这是一个按钮）的.tab-content级
-在父级中，找到所有复选框
-点击它们