[英]Select All/Deselect All checkboxes in a page
我看這個,這似乎對我的代碼沒有任何影響。 我試過這個似乎只影響第一個復選框,但是當我再次單擊它時不會取消選中該復選框......我還看到了其他一些我不確定的方法Rails-esque(或任何術語應該是)。
那么,有人可以指出我正確的方向嗎?
這是我的觀點:
<%= render 'admin/distributions/head' %>
<% title 'Workflow' %>
<%= form_for @search, :url => url_for(:controller => params[:controller], :action => params[:action]), :html => {id => "distribution_workflow",:method => :get} do |f| %>
<div class="opportunity-block yellow">
<div class="form-block mrl mbm">
<%= f.label :created_at_gt, "Created at >" %>
<%= f.text_field :created_at_gt, :class => "js-db-date-picker" %>
</div>
<div class="form-block mrl mbm">
<%= f.label :created_at_lte, "Created at <=" %>
<%= f.text_field :created_at_lte, :class => "js-db-date-picker" %>
</div>
<div class="form-block mrl mbm mtm">
<%= f.label :status_equal, "Status" %>
<%= f.select :status_equal, %w(delivered no_success already_registered qa_complete success follow_up), :include_blank => " " %>
</div>
<div class="clear"></div>
<%= submit_tag 'Apply Filter', :class => "input-button dark unit-right mrl" %>
<div class="clear"></div>
</div>
<% end %>
<%= form_tag edit_multiple_admin_distributions_workflows_path , :id => "workflow_form" do %>
<%= submit_tag "Edit Selected" %>
<table class="standard-grid">
<tr>
<th class="first"> </th>
<th>ID</th>
<th>Customer</th>
<th>Resume URL</th>
<th>Partner</th>
<th>Status</th>
<th>Assigned To</th>
<th>Comments</th>
</tr>
<% @report.each do |distribution| %>
<tr>
<td><%= check_box_tag "distribution_ids[]", distribution.id %></td>
<td>
<%= distribution.owner.id %>
</td>
<td>
<%=link_to distribution.owner.full_name, "mailto:#{distribution.owner.email}" %>
</td>
<td>
<a href=<% UrlService.download_blob_url(distribution.resume) %>>Resume URL</a>
</td>
<td>
<%=link_to distribution.matching_profile.partner.title, "mailto:#{distribution.matching_profile.partner.email}" %>
</td>
<td>
<%= distribution.status %>
</td>
<td>
<%= distribution.assignee_id ? User.find(distribution.assignee_id).full_name : " " %>
</td>
<td>
<%= distribution.comments %>
</td>
</tr>
<% end %>
</table>
<% end %>
這是您的工作示例: http : //jsfiddle.net/wYPWL/
HTML 示例:
<input type="checkbox" id="selectAll" value="selectAll"> Select / Deselect All<br/><br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
Javascript:
$('#selectAll').click(function() {
if (this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
無論您的復選框名稱如何,這都將起作用。 如果您真的只想定位上面代碼中顯示的復選框,則可以將$(':checkbox')
替換$(':checkbox')
$('input[id^="distribution_ids"]')
,這是 jQuery 定位具有以distribution_ids開頭的 ID
如果使用 jquery,您可以使用以下 (coffeeScript):
if (this.checked)
$(':checkbox').each ->
$(this).prop('checked', true)
else
$(':checkbox').each ->
$(this).prop('checked', false)
我在嘗試設置 this.checked = false 時發現了一個問題 - 不太確定發生了什么,但上面的代碼有效。
我發現有一個問題iWasRobbed的回答是,如果Select All
選中,然后如果你喜歡未選中(任何一種選擇Bar1
, Bar2
, Bar3
),然后Select All
必須取消選中...
這是解決方案..
HTML代碼
<input id="campaign_range_ids_1" class="checkbox" type="checkbox" value="1" name="campaign[range_ids][]"> India
<input id="campaign_range_ids_2" class="checkbox" type="checkbox" value="2" name="campaign[range_ids][]"> London
<input id="campaign_range_ids_3" class="checkbox" type="checkbox" value="3" name="campaign[range_ids][]"> USA
<input id="campaign_range_ids_4" class="checkbox" type="checkbox" value="4" name="campaign[range_ids][]"> All
JavaScript 代碼:
$('#campaign_range_ids_4').click(function () {
if ($(this).is(':checked')) {
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', true);
} else {
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').prop('checked', false);
}
});
$('#campaign_range_ids_1,#campaign_range_ids_2,#campaign_range_ids_3').click(function () {
if ($(this).is(':checked')) {
} else {
$('#campaign_range_ids_4').prop('checked', false);
}
});
如果您想為同一頁面上的多個單獨列表全選
$("input[data-select-all]").on("click", function() {
let $checkboxes = $("input[data-"+$(this).data("select-all")+"]");
if (this.checked) {
$checkboxes.each(function() {
this.checked = true;
});
} else {
$checkboxes.each(function() {
this.checked = false;
});
}
});
<table>
<thead>
<tr>
<th><input type="checkbox" name="selected" id="select-all" value="1" title="Select all" data-select-all="select-all-target"></th>
<th>Asset</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="form-check"><input type="checkbox" name="selected" id="asset_type_11" value="1" data-select-all-target="true"></span></td>
<td>The name</td>
<td>The description</td>
</tr>
</tbody>
</table>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.