简体   繁体   中英

CheckAll checkboxes in nav-tabs

I made a checkAll function, but when I use it inside a nav-tab it also selects the checkboxes from tabs that aren't active and I don't want that. How can I make this work right?

Here's the button I'm using to check all:

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

My coffee function:

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

And my tabs, inside them I'm rendering tables and that's where the checkboxes are.

<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>

Your javascript code works as expected. $('input[type="checkbox"]').click() means: click on all checkbox inputs.

To achieve what you want, you have select only inputs inside active tab, for instance:

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

or if the button is inside tab-content , then:

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

The code above will:
- find a parent of $(this) (which is a button) that has .tab-content class
- inside the parent, find all checkboxes
- click them

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM