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.