在做一个商城的购物车的时候遇到了一个坑, 购物车一般都有全选按钮, 再次点击就会全部消除, 在网上查到的答案全部都是使用attr来做的, 无一例外都不能用, 之后才知道要使用jquery的prop和removeProp

关于attr和prop的区别

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>demo</title>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script>

        $(function(){

            isChecked = false;

            $('#all').click(function(){

                isChecked = !isChecked;

                if(isChecked){

                    $('.option').prop("checked",true)

                }else{

                    $('.option').removeProp("checked")

                }

            })

        })

    </script>

</head>

<body>

    <input type="checkbox" value="1" class="option">1</input>

    <br>

    <input type="checkbox" value="2" class="option">2</input>

    <br>

    <input type="checkbox" value="3" class="option">3</input>

    <br>

    <input type="checkbox" value="4" class="option">4</input>

    <br>

    <input type="checkbox" value="全选" id="all">全选</input>

</body>

</html>

Jquery-全选和取消的一个坑的更多相关文章

  1. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  2. JS实现全选与取消 Jquery判断checkbox是否被选中

    1.JS实现checkbox全选与取消 <body> <input type="checkbox" name="select_all"/> ...

  3. jquery全选,取消全选

    近期项目又用到了这个全选和取消全选的操作. 曾经总是自己写纯JS.如今既然知道怎么写了.那怎样用JQ写得更简洁呢.这样也能学到新的东西.假设乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码 ...

  4. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  5. jquery购物车全选，取消全选，计算总金额

    这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...

  6. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. checkbox全选和取消功能

    这是开发中常见的小功能,想当初我也曾对于attr和prop的不了解踩过坑. 前端工作中,常常会使用到select复选框,select复选框有一个属性checked,当使用js或者jquery控制这个属 ...

  8. JQuery全选Prop（“check”，true）和attr("attr",true)区别

    $scope.selectAll = false; //点击单选框的时候是不是全选 $scope.checkIsAll = function(){ var wipeCheckBoxObj = $(&q ...

  9. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

随机推荐

  1. SICP-1.5-控制结构

    测试 DOCSETS 在docstring中直接添加测试 def sum_naturals(n): """Return the sum of the first n na ...

  2. UE4 Run On owing Client解析（RPC测试）

    今天看到文档中游戏性指南->远程调用函数->在蓝图中使用远程调用函数的 Run On Owning Client 在所有权的客户端上运行部分,发现把Add Item和Remove Item ...

  3. 通过bin-log对mysql进行数据恢复

    mysqlbinlog --database=数据库名 --start-date="2017-06-01 5:00:00"  --stop-date="2017-06-1 ...

  4. mysql 发生系统错误 1067

    最近要搞一个免安装版的mysql,原来的配置在d盘的my.ini如下 [client]port=3306default-character-set=utf8 [mysqld]port=3306char ...

  5. printf和scanf整理（后续填补）

    scanf和printf头文件:<stdio.h> 1.%d.%3d.%03d.%-3d区分 %d:以十进制形式输出整数(int) %3d:指定宽度为3,不足的左边补空格 %03d:一种左 ...

  6. 双核 CPU

    双核 CPU 时间限制: 1 Sec  内存限制: 128 MB 题目描述 由于越来越多的计算机配置了双核 CPU,TinySoft 公司的首席技术官员,SetagLilb,决定升级他们的产品-SWO ...

  7. Ubuntu16.04 + caffe-ssd + [CPU_ONLY] + KITTI 训练总结

    本次训练主要参考:http://blog.csdn.net/jesse_mx/article/details/65634482 感谢 Jesse_Mx ,帮助了我很多. 坑一[openCV未安装成功] ...

  8. 玩转spring boot——websocket

    前言 QQ这类即时通讯工具多数是以桌面应用的方式存在.在没有websocket出现之前,如果开发一个网页版的即时通讯应用,则需要定时刷新页面或定时调用ajax请求,这无疑会加大服务器的负载和增加了客户 ...

  9. angular-ui-alert

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 13.localStorage和sessionStorage的区别

    HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...