jQuery 实现表格与 ckeckbox 的全选、单选功能

秒速五厘米 2022-03-28 05:41 217阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

功能点 1.  用户点击头的checkbox时，所有表格数据行的checkbox全选或反选。

当数据行某一行没有选中时，头checkbox去选。当所有数据行的checkbox全选时，头的checkbox也选上。

![499602be0642de1314c8420c2c4e5916.gif][]

html代码示例，关注高亮部分即可：

![907a11a2e269ed6a295cd2f16b5139d3.png][]

jQuery代码，可以参考如下：

![4517450ea1d4d0952b893aeb049cee51.png][]

功能点 2.  表格无数据行时，隐藏下面两个铵钮，反之显示它们

![b17fb1d71187c3056c487d004528ae86.gif][]

如下面代码示例：

![8c1ae6ec7603ca3e12eda102857ffb73.png][]

jQuery代码：

![6de886336e05dd72611e091e6df8646c.png][]

转自：[https://www.jb51.net/article/98151.htm][https_www.jb51.net_article_98151.htm]

[Link 1]: https://www.captainai.net/jiangyu1013/
[499602be0642de1314c8420c2c4e5916.gif]: /images/20220328/cf7cb26f82544e3c97c406dc4223f452.png
[907a11a2e269ed6a295cd2f16b5139d3.png]: /images/20220328/b274b5ffb5a348cf83885542a9d5c640.png
[4517450ea1d4d0952b893aeb049cee51.png]: /images/20220328/65856e652e154dd6bbb342f93379ab1a.png
[b17fb1d71187c3056c487d004528ae86.gif]: /images/20220328/72729689d1e649bf8f474fe02f143af5.png
[8c1ae6ec7603ca3e12eda102857ffb73.png]: /images/20220328/337c8600edbb4283bc4a1aaa828d61c5.png
[6de886336e05dd72611e091e6df8646c.png]: /images/20220328/50c58df248434013a527871c34858b02.png
[https_www.jb51.net_article_98151.htm]: https://www.jb51.net/article/98151.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现全选反选功能

用jQuery实现全选反选功能要求要求1：点击全选的checkbox，让下面所有人名前的checkbox的选中状态和全选的一致要求2：点击反选按钮，所有人名

迷南。/ 2023年06月25日 06:05/ 0 赞/ 41 阅读

相关利用JavaScript和jQuery实现全选全不选和反选功能

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

客官°小女子只卖身不卖艺/ 2023年06月16日 04:56/ 0 赞/ 49 阅读

相关 JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候，心想很简单的一个功能，几行代码就能搞定，然而事实并非如此。下面就把我的思路说一下：

旧城等待，/ 2022年07月14日 14:09/ 0 赞/ 356 阅读

相关 Jquery 实现全选全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>attr</title>

ゞ浴缸里的玫瑰/ 2022年06月05日 00:16/ 0 赞/ 316 阅读

相关 jquery实现购物车全选反选功能

利用jquery实现购物车中全选（反选）换图功能，具体代码如下： <!DOCTYPE html> <html lang="en"> <head>

小鱼儿/ 2022年05月15日 10:29/ 0 赞/ 273 阅读

相关 jquery实现复选框的全选与全不选与反选

<html> <head> <meta charset="utf-8" /> <title>全选/全不选/反选</title>

古城微笑少年丶/ 2022年04月03日 06:26/ 0 赞/ 332 阅读

相关 VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1. 效果：如红框中部分。一选全选：表头上的单选框

怼烎@/ 2022年03月28日 10:50/ 0 赞/ 1045 阅读

相关 jQuery 实现表格与 ckeckbox 的全选、单选功能

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 功能点 1. 用户点击头的checkbox时，所有表

秒速五厘米/ 2022年03月28日 05:41/ 0 赞/ 218 阅读

相关 jQuery中的表格全选与不选

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淩亂°似流年/ 2022年01月21日 10:49/ 0 赞/ 116 阅读

相关 jQuery中实现全选，全不选功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

蔚落/ 2021年09月18日 23:04/ 0 赞/ 427 阅读