复选框全选和反选例子

最新推荐文章于 2023-08-15 18:38:10 发布
最新推荐文章于 2023-08-15 18:38:10 发布
阅读量911 收藏
点赞数
分类专栏： 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bling_Bling_/article/details/53781845
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {  
                //全选或全不选  
                $("#all").click(function () {  
                    if (this.checked) {  
                        $("#list :checkbox").attr("checked", true);  
                    } else {  
                        $("#list :checkbox").attr("checked", false);  
                    }  
                });  
                //设置全选复选框  
                $("#list :checkbox").click(function () {  
                    allchk();  
                });  
                function allchk() {  
                    var chknum = $("#list :checkbox").size();//选项总个数  
                    var chk = 0;  
                    $("#list :checkbox").each(function () {  
                        if ($(this).attr("checked")) {  
                            chk++;  
                        }  
                    });  
                    if (chknum == chk) {//全选  
                        $("#all").attr("checked", true);  
                    } else {//不全选  
                        $("#all").attr("checked", false);  
                    }  
                }  
                //显示时执行一次  
                allchk();  
            });  
        </script>
    </head>
    <body>
        <div id="list">  
            <table>  
                <tr><td>选项1<input type="checkbox" name="group" value="1"/></td></tr>  
                <tr><td>选项2<input type="checkbox" name="group" value="2"/></td></tr>  
                <tr><td>选项3<input type="checkbox" name="group" value="3"/></td></tr>  
            </table>  
        </div>  
        全选<input type="checkbox" id="all"/>
        
    </body>
</html>

Bling_Bling_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jquery实现复选框全选，反选，全不选等功能
11-26
设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <...
复选框的全选、全不选和反选
weixin_57762552的博客
04-19 4036
如图： 整个页面内容非常少只有五个复选框和三个按钮，如果嫌复选框少的话可以自己手动增加。 HTML内容如下图，但要注意一点就是输入框的tyep属性的属性值一定要是checkbox，因为checkbox就是复选框的意思，在HTML里也是复选框，所以tyep的值一定要是checkbox，要不然它就不是一个复选框。 接下来就是本篇文章的重点，JavaScript部分。 按照惯例首先要获取到所有...
复选框的全选与反选功能
m0_75250529的博客
08-15 108
input type="button" id="i5" >全选。<input type="button" id="i6" >反选。
Checkbox全选反选
weixin_43332393的博客
09-27 1109
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
01-全选反选案例
Strohht的博客
05-28 41
【代码】01-全选反选案例。
【案例】js全选反选按钮的实现
一种简单易食的杂烩????
04-10 1501
效果图 思路 全选 首先要使给全选按钮设置一个点击事件，在点击选中时可以使下面的每个多选按钮都选中。 让每个多选按钮checked的状态都和全选按钮一致 反选 首先给每个多选按钮设置一个点击事件， 让每个多选按钮都选中时全选按钮也被选中 可以先给全选按钮设置选中，然后判断一下如果有多选按钮没有被选中，则令全选按钮也不被选中 实现文字改变 使用三元运算符判断当前的先择状态，在根据状态给文字设置内容 代码实现 <!DOCTYPE html> <html lang="en"> <
三个基于jQuery的JS复选框全选反选例子
05-12
摘要:脚本资源,jQuery,全选,反选　三个基于jQuery的JS复选框全选反选例子，实用的网页特效，三款例子大同小异。所有checkbox跟着全选的checkbox走，定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，...
基于jQuery的三个JS复选框全选反选例子.zip
11-10
基于jQuery的三个JS复选框全选反选例子.zip
一个基于jQuery 实现的的全选、反选复选框插件源码例子
03-23
一个基于jQuery 实现的的全选、反选复选框插件源码例子
jQuery表格行全选反选单选代码
09-17
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
三种方式实现checkbox全选，反选
09-27
三种方式实现checkbox全选，反选，最简单的js技术；基于java代码，简单易懂，提供三3个demo，每一个都能实现
jquery 、js实现复选框 (全选、反选)
06-09
jquery 、js实现复选框 (全选、反选)功能··
checkbox全选、反选、单选（前端）
01-26
复选框一级类别和二级类别，一级类别有全选和反选，二级类别单选（如果二级类别所有复选框为false，则一级类别复选框为false）
layui 复选框全选
qq_40761737的博客
05-25 3591
layui 复选框实现多选全选
JQuery--全选与反选小案例
欣欣酱博客
12-28 412
这个全选反选案例相信大家并不陌生了吧，在我们结算购物车时，点击全选按钮就会选择到所有商品，再点击取消其中之一商品，全选按钮就会自动取消。如果购物车中已经选择的物品个数等于所有物品个数，则全选按钮自动select。 下面我们来实施这个小案例。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
全选和反选的案例
weixin_30466039的博客
07-08 62
　　HTML结构: 1 <div class="wrap"> 2 <table> 3 <thead> 4 <tr> 5 <th> 6 <input...
复选框的全选和反选
flyflyfly88的博客
08-09 366
当点击全选按钮时，所有复选框都被选中， 若有一个复选框没有被选中，则取消全选复选框的选中状态 1、一个订单表格的HTML代码 全选 商品名称 数量 价格 操作 哇哈哈矿泉水 10 2 农夫山
vue实现全选反选案例
小白小白从不日别的博客
12-07 2242
0. 基本布局和将初始数据渲染到页面 1. 小选影响全选 小选框 input 里面的 v-model ：对象.c关联 选中 状态 <li v-for="(obj, index) in arr" :key="index"> <!-- 让对象的 c 属性，关联 选中 状态 --> <input type="checkbox" v-model="obj.c" /> <span>{{obj.name}}...
JS实现checkbox的全选和反选
weixin_53748496的博客
12-09 1818
【代码】JS实现checkbox的全选和反选。实现以下功能： （1）当选中表头的商品 价格前的checkbox框时，下面的每个商品都会被选中。（全选） （2）当选中所有商品时，表头的商品 价格前的checkbox框自动被选中。（反选） （3）只要有一个商品没被选中，表头的商品 价格前的checkbox框就不会被选中。
jquery复选框全选和反选
最新发布
11-29
以下是jQuery实现复选框全选和反选的代码示例： 1. 全选 ```javascript //全选按钮 $("#checkedAllBtn").click(function(){ //所有复选框的状态都变成选中状态 items.prop("checked",true); //全选/全部选复选...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值