選擇所有複選框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

注意the ID of an element must be unique。

當查找由ID的元素，JavaScript的匹配僅單個元件的，因爲它假設該ID是唯一的合同尊重。

如果你有兩個環節，一個是「選擇所有」爲「選擇無」，給他們每個人不同的ID（或類名）和一個，並有不同的$(...).click(function() { ... });回調爲他們每個人。

首先，它只是做check，而另一方面，它做uncheck。

通知您click回調如何有一個if (this.checked) ...部分。如果this是一個複選框，它就不起作用。取決於按下哪個鏈接，如果您打算選中或取消選中，則已知道，這就是每個鏈接的單獨回調有意義的原因。

Answer 2

由於EyasSH聲明你不應該使用重複的ID，因爲這是一個可怕的做法和無效。這就是爲什麼$('#selectall')只返回一個元素。 但是您可以更改選擇器，使其找到重複ID的所有實例，將其更改爲$('[id="selectall"]')