Jquery全选与反选点击执行一次的解决方案

为了实现全选和反选的功能，我们可以使用 jQuery 的 prop() 和 each() 方法来轻松实现全部或部分勾选的功能。
下面是jQuery全选与反选的完整攻略：

HTML结构

首先，我们需要准备一个表格，里面有多个复选框和全选按钮：

<table>
  <thead>
    <tr>
      <th><input type="checkbox" class="check-all"></th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="check-single"></td>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="check-single"></td>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

Jquery代码实现

然后，我们需要编写一些 jQuery 代码，来实现全选和反选的功能。

全选

实现全选的方法是在全选按钮的点击事件中，遍历所有单选框，将它们全部选中：

$('.check-all').click(function(){
  $('.check-single').prop('checked', true);
});

反选

反选有些复杂，因为我们需要知道哪些单选框被选中了。我们可以遍历所有单选框，检查它们的选中状态，如果选中则取消选中，否则则选中它们：

$('.check-inverse').click(function(){
  $('.check-single').each(function(){
    var checked = $(this).prop('checked');
    $(this).prop('checked', !checked);
  });
});

只执行一次

然而，我们还需要注意一个细节：避免多次执行全选或反选的函数。否则，当用户多次点击全选或反选按钮时，它们会一遍遍地选中或取消选中所有单选框。我们可以使用 jQuery 的 one() 方法，让函数仅仅执行一次：

$('.check-all').one('click', function(){
  $('.check-single').prop('checked', true);
});

$('.check-inverse').one('click', function(){
  $('.check-single').each(function(){
    var checked = $(this).prop('checked');
    $(this).prop('checked', !checked);
  });
});

现在，我们就可以安全地实现全选和反选的功能，而避免了重复执行的问题。

示例1：基本用法

下面是一个基本用法的示例，它可以让用户在单击“全选”或“反选”按钮时，选中或取消选中所有单选框。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Checkboxes Demo</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table { border-collapse: collapse; }
    table td, table th { padding: 5px; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" class="check-all"></th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>Jane Doe</td>
        <td>jane@example.com</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>Joe Smith</td>
        <td>jsmith@example.com</td>
      </tr>
    </tbody>
  </table>
  <button class="check-all">Select All</button>
  <button class="check-inverse">Invert Selection</button>

  <script>
    $('.check-all').one('click', function(){
      $('.check-single').prop('checked', true);
    });

    $('.check-inverse').one('click', function(){
      $('.check-single').each(function(){
        var checked = $(this).prop('checked');
        $(this).prop('checked', !checked);
      });
    });
  </script>
</body>
</html>

示例2：添加多个表格

下面是示例2，它包含多个表格。在这种情况下，我们需要确保每个表格的全选和反选按钮独立运作，而不是相互影响。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Checkboxes Demo</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table { border-collapse: collapse; margin-bottom: 20px; }
    table td, table th { padding: 5px; border: 1px solid #ccc; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" class="check-all check-all-1"></th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>Jane Doe</td>
        <td>jane@example.com</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>Joe Smith</td>
        <td>jsmith@example.com</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th><input type="checkbox" class="check-all check-all-2"></th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>John Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>Jane Doe</td>
        <td>jane@example.com</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="check-single"></td>
        <td>Joe Smith</td>
        <td>jsmith@example.com</td>
      </tr>
    </tbody>
  </table>

  <button class="check-all check-all-1">Select All (Table 1)</button>
  <button class="check-inverse check-all-1">Invert Selection (Table 1)</button>
  <button class="check-all check-all-2">Select All (Table 2)</button>
  <button class="check-inverse check-all-2">Invert Selection (Table 2)</button>

  <script>
    $('.check-all-1').one('click', function(){
      $(this).closest('table').find('.check-single').prop('checked', true);
    });

    $('.check-inverse').one('click', function(){
      $(this).closest('table').find('.check-single').each(function(){
        var checked = $(this).prop('checked');
        $(this).prop('checked', !checked);
      });
    });
  </script>
</body>
</html>

在这个示例中，我们分别为每个表格添加了单独的“全选”和“反选”按钮，并确保了它们只在自己的表格内运作。为此，我们使用了 closest() 方法来查找父级表格，然后使用 find() 方法查找特定的单选框。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery全选与反选点击执行一次的解决方案 - Python技术站