在做一个商城的购物车的时候遇到了一个坑, 购物车一般都有全选按钮, 再次点击就会全部消除, 在网上查到的答案全部都是使用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. js中年份、月份下拉框

    <select id="year" style="width: 100px;"></select> <select id=&quo ...

  2. 连接SQL SERVER数据库实例出错

    问题背景: 刚买的新电脑,昨天让公司IT部装了win10专业版系统,想体验一下.装完后一切正常,晚上带回家装自己需要的软件和系统更新,结果今天来公司发现数据库实例连不上了,拿到IT部,他们也没有找到原 ...

  3. An express train to reveries

    An express train to reveries time limit per test 1 second memory limit per test 256 megabytes input  ...

  4. twemproxy代理主干流程——剖析twemproxy代码正编

    在twemproxy的发送和接收流程剖析中,我们已经完全弄清楚twemproxy如何将客户端以及服务端发来的包切分成msg,获得一个独立的msg后twemproxy应该如何处理?这是本文这次需要重点介 ...

  5. php对数组中的键与值进行合并处理

    $res=array(); $re=array_count_values($month); foreach( $re as $k=>$v){ $arr['month_name'] = strva ...

  6. 在CentOS7上使用systemctl配置tomcat

    最近买了一台阿里云,现在阿里云CentOS都已经支持7了(前面都是使用CentOS6),索性直接使用CentOS7,7上面目前最大区别就是service变成了现在的systemctl,简单的查了一下并 ...

  7. [leetcode-556-Next Greater Element III]

    Given a positive 32-bit integer n, you need to find the smallest 32-bit integer which has exactly th ...

  8. 简单说下Kanzi Studio

    一.Project 窗口 在Project窗口下可以创建界面节点,包含有Screen和Prefabs 二.Properties窗口 包含有节点的相关属性,不同类型的节点,属性不同.主要通过改变节点的属 ...

  9. Your password does not satisfy the current policy requirements

    创建用户,做测试想设置一个简单的密码.报错: 大概是MySQL5.7搞事情,默认安装了validate_password插件. mysql> SHOW VARIABLES LIKE 'valid ...

  10. cygwin安装gcc/g++

    安装cygwin如果按照默认的方式一直点下去的话,安装完了会发现没有安装gcc/g++. 这个时候可以在安装文件的目录打开命令行,并输入: setup-x86_64.exe -q -P wget -P ...