選中所有復選框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的所有實例。