使用jQuery完成复选框的全选和全不选

最新推荐文章于 2024-04-25 11:38:14 发布
最新推荐文章于 2024-04-25 11:38:14 发布
阅读量198 收藏
点赞数


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="../css/style.css" />

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

        <script>

            // 表格的隔行换色

            $(function() {

                $("tbody tr:odd").addClass("odd");

                $("tbody tr:even").addClass("even");

            });

        </script>

    </head>

    <body>

        <table id="tab1" border="1" width="80%" align="center">

            <thead>

            <tr>

                <th><input type="checkbox" id="selectAll" /></th>

                <th>分类的ID</th>

                <th>分类的名称</th>

                <th>分类的描述</th>

                <th>操作</th>

            </tr>

            </thead>

            <tbody>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>1</td>

                    <td>手机数码</td>

                    <td>手机数码</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>2</td>

                    <td>电脑办公</td>

                    <td>电脑办公</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>3</td>

                    <td>烟酒糖茶</td>

                    <td>烟酒糖茶</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>4</td>

                    <td>鞋靴箱包</td>

                    <td>鞋靴箱包</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

                <tr>

                    <td><input type="checkbox" name="ids" /></td>

                    <td>5</td>

                    <td>汽车用品</td>

                    <td>汽车用品</td>

                    <td><a href="">修改</a>|<a href="">删除</a></td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

 

 

  1. <script>

  2. // 复选框的全选和全不选

  3. $(function() {

  4. $("#selectAll").click(function() {

  5. $(":checkbox[name='ids']").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象

  6. });

  7. });

  8. </script>

血晨
关注
jQuery实现复选框全选和全不选
Java技术
07-15 1025
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table { margin: auto; } </style> <...
基于jquery实现复选框全选，反选，全不选等功能
10-23
在这篇文章中，将介绍如何使用jQuery库来实现复选框的全选、反选和全不选功能。全选功能是将一组复选框都标记为选中状态；反选功能则是将已有选中的复选框取消选中，将没有选中的复选框设置为选中状态；全不选功能则...
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
05-11
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
四、案例：使用jQuery完成复选框的全选效果
积石成岩，流则不荒
04-14 245
1 知识点 JQ对象修改属性的方法：$.prop("属性名","参数");； this关键字表示当前函数的JQ对象。 2 步骤 文档加载完成事件 allcheck的点击事件中触发函数 函数实现更改checks的checked属性改为allcheck的checked属性 3 实现 <script> $(function(){ $("#allcheck").click(...
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
使用 jquery 实现 checkbox “全选/全不选” 效果
快雪时晴天的专栏
09-13 528
需求：使用 jquery 实现 checkbox 的全选与全不选。效果如图： 全选 关键的 jquery 代码： $(function(){ $
jQuery实现复选框全选和取消全选功能
最新发布
牧小七的博客
04-25 965
使用jQuery实现复选框全选和取消全选功能，在全选状态取消其中一项勾选时，全选按钮会自动取消勾选，所有项全部单独勾选上时，全选按钮也会自动勾选。
JQ checkbox 全选和全不选
06-10
NULL 博文链接：https://onestopweb.iteye.com/blog/2337148
jquery实现checkbox的全选和全不选
10-18
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
利用jQuery简单实现CheckBox全选效果
百威
05-28 173
[code="java"] 利用jQuery简单实现CheckBox全选效果 $(function () { $("#all").click(function () { var checked_status = this.checked; ...
JQuery 实现全选（全不选）
博海软件
08-05 109
控制全选和全不选的checkBox代码如下： &lt;input type="checkbox" name="checkAll" id="checkAll" Onclick="JavaScipt:doCheckAll()"&gt;   doCheckAll() 函数如下： function doCheckAll() { if ($('#checkAll').attr('checked'...
jQ学习之实现全选全不选操作
07-14 111
一：比较简单 详细说明都在注释里了，还是要灵活掌握选择器的使用 需要注意的是：attr属性只在jq1.8.3即以下版本有效，如果要在更高版本使用 要是用prop方法 html代码： 1 <table border="1px solid" cellspacing="0px" bordercolor="red" width="500px" align="ce...
jq实现全选和全不选
dxm809的博客
09-05 536
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成复选框的全选和全不选</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <!--<script type="text/javascript.
JQuery实现全选/全不选
你好啊cbw
03-06 895
当点击全选时，获取全选表单项的checked属性值flag为true即被选中然后给所有属性名name='one'表单项添加被选中的属性checked="true" 给所有单选框绑定点击事件，当点击某个单选框取消被选中时，这时候需要遍历所有单选框当找到任意一个没被选中的单选框时就修改全选的那个单选框的被选中状态为false即checked=false,若是所有单选框的checked属性都是true则修改全选的那个单选框为被选中状态checked=true <!DOCTYPE html>
jQuery全选，全不选判断
qq_42400124的博客
08-16 449
jQuery全选，全不选 演示效果： HTML代码 <div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者</
Jquery复选框的全选全不选及选择所有复选框实现全选的复选框
08-17 214
Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(this).parent().parent().next().find(":checkbox").pro...
js复选框全选和全不选代码
07-08
在回调函数中，我们使用 `forEach` 方法遍历所有选项复选框，并将它们的 `checked` 属性设置为与全选复选框相同的值，从而实现全选和全不选的功能。 请注意，上述代码仅为示例，你需要根据你的具体HTML结构和需求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值