选中所有复选框javascript

Question

嗨，我正在尝试在我的Rails应用程序中“全部选中或取消全部选中”复选框。 当我使用复选框和JS时，它确实起作用。 但是，我也希望用户也具有与链接相同的功能。 因此，当单击链接时，它将“全部选中或取消全部选中”复选框。

谢谢，

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

请注意， 元素的ID必须是唯一的 。

当按ID查找元素时，JavaScript将仅匹配单个元素，因为它假定ID唯一的约定得到遵守。

如果您有两个链接，一个用于“全选 ”，一个用于“全选 ”，为每个链接赋予不同的ID（或类名），并具有不同的$(...).click(function() { ... }); 回调每个。

对于一个，它只执行check ，而对于另一个，它执行uncheck 。

请注意，您的click回调如何包含if (this.checked) ...部分。 如果this是一个不再适用的复选框，则this方法有效。 根据按下哪个链接，您已经知道要检查还是取消选中，这就是每个链接单独回调有意义的原因。

Answer 2

正如EyasSH所述，您永远不应使用重复的ID，因为这是一种糟糕的做法，而且是无效的。 这就是$('#selectall')仅返回一个元素的原因。 但是您可以通过将选择器更改为$('[id="selectall"]')来更改选择器，以使其找到重复ID的所有实例。