这是一个循环，每个用户旁边都有一个复选框。

Question

您好我试图检查全部或取消全部＆＃34;我的rails应用程序中的复选框。当我使用复选框和JS时，它确实有效。但是，我也希望用户具有与链接相同的功能。因此，当点击链接时，它将＆＃34;全部检查或取消全部＆＃34;复选框。

谢谢，

 <!-- Split button -->
    <div class="btn-group">
     <button type="button" class="btn btn-warning"><input type="checkbox" id="selecctall" value="selectAll"></button>
    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" role="menu">
      <li><a id="selectAll"  title="Click to do something" href="#" onclick="check();return false;">Select All</a></li>
      <li><a id="selectAll" title="Click to do something" href="#" onclick="uncheck();return false;">None</a></li>
    </ul>
  </div>

这是一个循环，每个用户旁边都有一个复选框。

<% @users.each do |user| %>
   <tr class="<%= cycle("even", "odd") %>">
    <td><input id= "user_id_<%="#{user.id}"%>" name="user_ids[]" value=<%= user.id %> type="checkbox" class="checkbox1"></td>
    <td><%= user.full_name %></td>
    <td><%= user.email %></td>
    <td>
  <% end %>

这是页面底部的js

<% content_for :javascripts do %>
      <script >
        function check() {
          if(document.getElementById("selecctall").checked = true;
        }

       function uncheck() {
         document.getElementById("selecctall").checked = false;
      }

     $(document).ready(function() {
        $('#selecctall').click(function(event) {
            if(this.checked) {
                $('.checkbox1').each(function() {
                    this.checked = true;
                });
            }else{
                $('.checkbox1').each(function() {
                    this.checked = false;
                });
            }
        });

     });
     $('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
     });
   </script>

Answer 1

请注意the ID of an element must be unique。

按ID查找元素时，JavaScript只会匹配一个元素，因为它假定ID是唯一的合约是受到尊重的。

如果您有两个链接，一个用于＆＃34; 选择所有＆＃34;和＃34; 选择无＆＃34;，为每个人提供不同的ID（或类名），并为每个人提供不同的$(...).click(function() { ... });回调。

首先，它仅执行check，而另一方则执行uncheck。

注意您的click回调如何有if (this.checked) ...部分。如果this是一个不再存在的复选框，则此方法有效。根据所按的链接，如果您打算选中或取消选中，已经知道，这就是每个链接的单独回调有意义的原因。

Answer 2

正如EyasSH所说，你永远不应该使用重复的ID，因为这是一种可怕的做法而且无效。这就是$('#selectall')只返回一个元素的原因。但是您可以更改选择器，以便通过将其更改为$('[id="selectall"]')

来查找重复ID的所有实例

选中所有复选框javascript

这是一个循环，每个用户旁边都有一个复选框。

这是页面底部的js

2 个答案: