выбрать все флажки 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.

При поиске элемента по идентификатору JavaScript будет соответствовать только одному элементу, так как он предполагает, что договор, в котором идентификаторы уникальны, соблюдается.

Если у вас есть две ссылки, одна для «выбрать все» и один для «выберите ни», дать каждому из них различные идентификаторы (или имена классов), и имеют различную $(...).click(function() { ... }); обратного вызова для каждого из них ,

Во-первых, он просто делает check, а для другого - uncheck.

Обратите внимание, что ваш click callback имеет часть if (this.checked) .... Это работает, если this - это флажок, который больше не существует. В зависимости от того, какая ссылка нажата, вы уже знаете, если вы намерены проверить или снять флажок, поэтому отдельные обратные вызовы для каждой ссылки имеют смысл.

Answer 2

Как заявила EyasSH, вы никогда не должны использовать дубликаты идентификаторов, поскольку это ужасная практика и недействительна. Вот почему $('#selectall') возвращает только один элемент. BUT вы можете изменить селектор, чтобы найти все экземпляры повторяющихся идентификаторов, изменив его на $('[id="selectall"]')