jquery checkbox全选

原创

mob64ca12ef217e 2023-12-13 03:31:37 ©著作权

文章标签 jQuery 复选框 HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ef217e的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery Checkbox全选

简介

在Web开发中，经常会遇到需要对多个复选框进行全选或反选的需求。jQuery是一个广泛使用的JavaScript库，提供了丰富的功能和简化DOM操作的方法，因此可以很方便地实现复选框的全选功能。本文将介绍如何使用jQuery实现复选框的全选功能，并通过代码示例进行演示。

准备工作

在开始之前，我们需要准备一个HTML页面，并引入jQuery库。在示例中，我们将使用一个包含多个复选框的表单来演示全选功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Checkbox全选</title>
  <script src="
</head>
<body>
  复选框全选示例
  <form id="checkbox-form">
    <input type="checkbox" name="checkbox" value="1">选项1<br>
    <input type="checkbox" name="checkbox" value="2">选项2<br>
    <input type="checkbox" name="checkbox" value="3">选项3<br>
    <input type="checkbox" name="checkbox" value="4">选项4<br>
  </form>
  <button id="select-all">全选</button>
  <button id="deselect-all">取消全选</button>
</body>
</html>

在上述代码中，我们创建了一个包含多个复选框的表单，并在表单下方添加了两个按钮，分别用于全选和取消全选。

实现全选功能

要实现全选功能，我们需要使用jQuery选择器选中所有的复选框，并为全选按钮绑定一个点击事件。当点击全选按钮时，我们将通过遍历复选框并设置它们的checked属性为true来实现全选功能。

下面是实现全选功能的代码示例：

$(document).ready(function() {
  $('#select-all').click(function() {
    $('input[name="checkbox"]').each(function() {
      $(this).prop('checked', true);
    });
  });
});

上述代码中，我们使用了$(document).ready()方法来确保页面加载完成后执行JavaScript代码。在该方法内部，我们为全选按钮绑定了一个点击事件，并使用$('input[name="checkbox"]')选择器选中了所有的复选框。接着，我们使用each()方法遍历选中的复选框，并使用prop()方法将它们的checked属性设置为true，从而实现全选功能。

实现取消全选功能

与全选功能类似，实现取消全选功能也需要为取消全选按钮绑定一个点击事件，并将所有复选框的checked属性设置为false。

下面是实现取消全选功能的代码示例：

$(document).ready(function() {
  $('#deselect-all').click(function() {
    $('input[name="checkbox"]').each(function() {
      $(this).prop('checked', false);
    });
  });
});

上述代码中，我们为取消全选按钮绑定了一个点击事件，通过遍历复选框并将它们的checked属性设置为false来实现取消全选功能。