自定义全选与反选插件

notice-shi

于 2022-05-26 11:20:35 发布

阅读量276

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_55746769/article/details/124981039

版权

本文介绍如何创建一个自定义的全选、反选和全不选插件，适用于表格数据操作。通过引入jQuery，编写封装的jQuery对象方法，实现对表格中复选框的选择状态进行控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义全选与反选插件

编写表格展示数据，为其提供“全选”、“反选”和“全不选”操作按钮。
引入jQuery文件以及自定义的插件文件（待编写）。
编写自定义插件文件，利用封装jQuery对象方法的方式实现插件。

在HTML中，调用插件封装的方法，实现全选、反选以及全不选的功能。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      width: 300px;
      margin: 80px auto 0;
    }

    .box{
      background-color: #f1f1f1;
      border-radius: 4px;
    }

    .box-item{
      height: 60px;
      padding: 0 10px;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .box-item:last-child{