在页面中选择全部/取消选择所有复选框 [英] 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-b​​lock mrl mbm> 
<％= f.label：created_at_gt，Created at> ％> 
<％= f.text_field：created_at_gt，：class => js-db-date-picker％> 
< / div> 
 
< div class =form-b​​lock mrl mbm> 
<％= f.label：created_at_lte，创建于< =％> 
<％= f.text_field：created_at_lte，：class => js-db-date-picker％> 
< / div> 
 
< div class =form-b​​lock mrl mbm mtm> 
<％= f.label：status_equal，Status％> 
<％= f.select：status_equal，％w（deliver 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_formdo％> 
<％= submit_tag编辑所选项％> 
< table class =standard-grid> 
< tr> 
< th class =first> < / th> 
< th> ID< / th> 
< th>客户< / th> 
< th>简历网址< / th> 
< th>合作伙伴< / th> 
< th>状态< / th> 
< th>已分配给< / th> 
< th>评论< / th> 
< / tr> 
<％@ report.each do | distribution | ％> 
< tr> 
< td><％= check_box_tagdistribution_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）％>>恢复网址< / 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 =checkboxid =selectAllvalue =selectAll>选择/取消选择全部< br />< br /> 
 
< input type =checkboxname =foovalue =bar1>条1< br /> 
< input type =checkboxname =foovalue =bar2>条2< br /> 
< input type =checkboxname =foovalue =bar3> Bar 3< br /> 
< input type =checkname =foovalue =bar4>条4< br /> 
  

Javascript：

 code> $（'＃selectAll'）。click（function（）{
 if（this.checked）{
 $（'：checkbox' $ b this.checked = true; 
}）; 
} else {
 $（'：checkbox'）每个函数（）{
 this.checked = false; 
}）; 
} 
}）; 
  

这将工作，不管你的复选框是什么命名。如果你真的想只定位上面代码中所示的复选框，可以用 $（'input []）替换 $（'：checkbox'） id ^ =distribution_ids]'）这是jQuery定位具有以 distribution_ids 开头的ID的输入元素的方式

I've looked at this which seems to have no effect on my code. I've tried this which seems to only affect the first checkbox, but doesn't uncheck the checkbox when i click it again anyway.... I've also seen some other ways of doing it that I'm not certain are entirely Rails-esque (or whatever the term should be).

So, could someone please point me in the right direction?

Here is my view:

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

解决方案

Here's a working example for you: http://jsfiddle.net/wYPWL/

HTML example:

<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;                        
       });
   } 
});

This will work regardless of what your checkboxes are named. If you really wanted to target only your checkboxes shown in your code above, you can replace $(':checkbox') with $('input[id^="distribution_ids"]') which is jQuery's way of targeting input elements that have an ID that starts with distribution_ids

这篇关于在页面中选择全部/取消选择所有复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！