在做一个商城的购物车的时候遇到了一个坑, 购物车一般都有全选按钮, 再次点击就会全部消除, 在网上查到的答案全部都是使用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. Android Studio常用快捷键使用

    以下是我在编程中实际用上的Android Studio快捷键,基于Windows系统,在使用过程中会不断添加不断完善,OSX版本的在另外一篇博客 Ctrl+Alt+L 格式化代码,编写完成项目来一下, ...

  2. 点击页面其它地方隐藏该div的方法

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  3. CoolBlog开发笔记第4课:数据库模型设计

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 1.3 CoolBlog开发笔记第3课:创建Django应用 前言 我新书<Py ...

  4. zend framework 1 安装教程

    网上的安装教程总是一笔带过,本人结合已经爬过的坑,为大家展示最简单的安装方式: 博主环境如下: 操作系统:win7 64bit 开发环境:lnmp(phpstudy) 注意: zftest:官方下载的 ...

  5. java中的选择排序之降序排列

    import java.util.Arrays;//必须加载 class Demo{ public static void main(String []args){ int[] arr={3,54,4 ...

  6. php几行代码实现CSV格式文件输出

    //适用于不需要设置格式简单将数据导出的程序,多多指教...... $str .= 'pro_code'.','.'words'.'\n';//首先写入表格标题栏 foreach($is_error ...

  7. Example011表单中修改内容

    <!-- 实例011表单中修改内容的方法 --> <!DOCTYPE html> <html lang="en"> <head> & ...

  8. sql将一列数据拼成一个字符串的方法

    SELECT STUFF(CONVERT(VARCHAR(500), ( SELECT TOP 10 ',' + BG_Country FROM dbo.BS_Budget FOR XML PATH( ...

  9. Angular基础（二）

    双向数据 利用angular把input框里面的值和h3的值绑定在一起.在input里输入内容,内容会在h3标签里显示出来. 具体效果请看下面代码:   <!DOCTYPE html>   ...

  10. Struts2请求参数合法性校验机制

    在Action中通过代码执行数据校验 请求参数的输入校验途径一般分两种:客户端校验 :通过JavaScript 完成 (jquery validation插件),目的:过滤正常用户的误操作. 服务器校 ...