导航选项卡中的 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)（这是一个按钮）的父级
- 在父级内部，找到所有复选框
- 点击他们