jquery全选反选 简洁易用

最新推荐文章于 2023-05-25 08:32:18 发布
最新推荐文章于 2023-05-25 08:32:18 发布
阅读量190 收藏
点赞数 2
文章标签： web jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengangliu/article/details/80089259
版权
<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<title>demo</title>
<style>
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>


<body>
<div class="wrap">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="theadInp" />
                        </th>
                        <th>快递</th>
                        <th>收件人</th>
                        <th>电话</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>顺丰</td>
                        <td>张</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>韵达</td>
                        <td>张</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>圆通</td>
                        <td>韩</td>
                        <td>186*****897
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>邮政</td>
                        <td>卫</td>
                        <td>186*****897
                    </tr>
                </tbody>
            </table>
        </div>
</body>
<script>

$(function() {
                $("#theadInp").on('click', function() {
                    $("tbody input:checkbox").prop("checked", $(this).prop('checked'));
                })
                $("tbody input:checkbox").on('click', function() {
                    if($("tbody input:checkbox").length === $("tbody input:checked").length) {
                        $("#theadInp").prop("checked", true);
                    } else {
                        $("#theadInp").prop("checked", false);
                    }
                })
            })


</script>


</html>
ZhenGangLiu
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于jquery实现复选框全选，反选，全不选等功能
11-26
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明。设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <input type="checkbox" name="fruit" value="banana" />香蕉 <input type="checkbox" name="fruit" value="grape" />葡萄 <input ty
jquery实现全选、反选、获得所有选中的checkbox (记录专用
yjq907的博客
11-09 759
7个不同的checkbox状态 1、全选 ? 1 2 3 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） ? 1 2 3
jQuery-全选/全部选/反选
heliuerya的博客
05-25 1416
input type="checkbox" name="items" value="羽毛球" />羽毛球。<input type="checkbox" name="items" value="乒乓球" />乒乓球。<input type="checkbox" name="items" value="足球" />足球。<input type="checkbox" name="items" value="篮球" />篮球。//全选/全部选复选框的状态也变成选中状态。//所有复选框的状态都变成选中状态。
【jQuery】实现全选和反选
Ai-Fairy的博客
09-01 220
利用jquery实现全选和反选。
补充上一篇：jQuery实现全选，反选，取消操作
lf1949的博客
03-27 1255
这篇文章是对上一篇文章的修改 上一篇文章：点击跳转至上一篇文章 在上一篇文章中我提到过没有理解取消操作的作用 以下是我的修改： 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jquery库--> <script src="js/jquery-3.6.0.mi
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
jquery全选反选全不选案例
04-04
jquery实现全选反选全不选案例，在入场网页开发中实现。
Jquery全选反选Checkbox
10-23
Jquery全选反选Checkbox 简单好用 复用性很好 欢迎下载
jquery全选反选插件
06-18
jquery全选反选插件
jquery实现全选和反选
m0_56398485的博客
08-29 1577
需求：点击全选，后面所有checkbox状态选中，当后面有一个checkbox状态没有选中时，全选取消。当后面有所有checkbox状态选中时，前面全选状态选中 ，下面就为大家实现这个效果。大家用之前记得下载一下jquery文件哦。......
jquery 、js实现复选框 (全选、反选)
06-09
jquery 、js实现复选框 (全选、反选)功能··
JQuery实现全选、全不选、反选功能
12-12
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中状态。 2、当选中当前页面的所有子复选框时，'全选'按钮应该是'选中'状态。 3、点点击'全不选'按钮时，当前页面的所有复选框置为非选中状态。 4、当点击'反选'按钮时，当前页面选中状态的复选框置为未选中状态，未选中状态的复选框置为选中状态。
jQueryCheckbox实现全选反选全部选
lyy747425777的博客
11-15 7838
代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="jquery-1.8.0.min.js"&
Jquery checkbox（全选/不全选、反选、单选、获取选中的值）
weixin_44240581的博客
01-01 254
判断某个checkbox是否选中，返回值： Boolean $("#XXX").eq(index).is(':checked') $("#XXX")[index].checked 设置某个checkbox的选中与不选中 $("#XXX").eq(index).prop('checked', true/false)
如何用jQuery实现全选 反选 功能
xiaofiy的博客
04-02 1921
需求 要求1：点击全选的按钮，让下面所有人名前的checkbox的选中状态和全选的一致 要求2：点击反选按钮，所有人名前的checkbox的选中状态取反 要求3：点击所有人名前的checkbox，判断全选的选中状态 效果如图 代码块如下 加注释 <!DOCTYPE html> <html lang="en"> <head> <meta char...
利用jQuery实现全选反选，全网最详解析
weixin_54139195的博客
08-30 314
【代码】利用jQuery实现全选反选，全网最详解析。
Jquery实现全选反选
weixin_48340600的博客
09-29 401
1、根据全选按钮状态决定复选框状态 $(".checkall").change(function () { $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")) }) 2、当复选框状态发生变化时，判断被选中复选框的数量是否等于复选框的数量；等于则把全选框的状态改为true；反之为false 完整代码： $(function () { // 1. 全选 全不选功能模块 // 就
jquery实现全选反选
weixin_46047399的博客
06-01 873
1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选（全不选） $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }) 3、选中所有奇数 $("#btn3").click(function(){ $("input[name='checkbox']:..
用 jQuery 实现全选/反选功能
qq_45093219的博客
05-26 1653
<!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>Doc
jquery全选反选不选
最新发布
12-20
以下是基于jQuery实现全选、反选和不选的代码示例： 1. 全选： ```javascript $("#selectAll").click(function(){ $("#checkBoxList :checkbox").prop("checked", true); }); ``` 2. 反选： ```javascript $("#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZhenGangLiu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值