导航选项卡中的 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() 表示：点击所有复选框输入。

为了达到你想要的效果，你 select 只能在活动选项卡中输入，例如：

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

或者如果按钮在 tab-content 内，则：

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

上面的代码将：
- 找到具有 .tab-content class
的 $(this)（这是一个按钮）的 parent - 在 parent 内，找到所有复选框
- 点击它们

导航选项卡中的 CheckAll 复选框

CheckAll checkboxes in nav-tabs

javascript

checkbox

ruby-on-rails

coffeescript