选中所有复选框 JavaScript

select all check boxes javascript

本文关键字：复选框 JavaScript      更新时间：2023-09-26

嗨，我正在尝试在我的 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>

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

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

如果有两个链接，一个

用于"全选"，一个用于"无选择"，请为每个链接提供不同的 ID（或类名），并为每个链接提供不同的 $(...).click(function() { ... }); 回调。

一方面，它只是做check，而对另一个人来说，它做uncheck。

请注意您的click回调如何具有if (this.checked) ...部分。如果this是一个复选框，则这有效，它不再是复选框。根据按下的链接，您已经知道是打算选中还是取消选中，这就是为什么每个链接的单独回调是有意义的。

正如 EyasSH 所说，您永远不应该使用重复的 ID，因为这是一种糟糕的做法且无效。这就是为什么$('#selectall')只返回一个元素的原因。但是，您可以更改选择器，使其找到重复ID的所有实例

，方法是将其更改为$('[id="selectall"]')
相关文章：