zepto全选按钮之全选会根据按钮是否被全部选中更改状态
在做手机端二次开发购物车的时候,发现zepto全选,没找到,或者功能不是自己想要的
后来做好,分享给需要的人
//全选或多选处理
var CheckAll = $('#items_check_all');
var checkbox = $('input[name^="check"]');
var removeUrl = '<{link app=b2c ctl=wap_cart act=remove}>';
//初始化,把所有选中的加上状态
if (CheckAll && checkbox) {
$('.pt-h-item').addClass('active').css('background','#efefef');
}
//全选或全不选
CheckAll.on("click",function(){
if (this.checked){
checkbox.prop('checked',true);
//$('.pt-h-item').addClass('active').css('background','#efefef');
}else{
checkbox.prop('checked',false);
//$('.pt-h-item').removeClass('active').css('background','#fff');
}
});
//单选后反向关联全选按钮
checkbox.on("click",function(){
var flag = true;
checkbox.each(function(item){
var parent = $(this).parents('.pt-h-item');
if (!this.checked) {
flag = false;
parent.removeClass('active').css('background','#fff');
}else{
parent.addClass('active').css('background','#efefef');
}
})
if (flag) {
CheckAll.prop('checked', true);
}else{
CheckAll.prop('checked', false);
}
});
zepto全选按钮之全选会根据按钮是否被全部选中更改状态的更多相关文章
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
- JS实现简单的多选选项的全选反选按钮
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮: ...
- js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...
- react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...
- angular4 checkbox复选框的全选,反选及个别选择
<label><input type="checkbox" name="" [(ngModel)]="master"> ...
- JavaScript---复选框反选全选
Script <script type="text/javascript"> /*直接使用document.getElementsByName("c1&quo ...
- js全选与取消全选
实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...
- JQ实现购物车全选跟总计全选
//GoodsCheck购物车每个店铺的checkBox//goods-check购物车所有的checkBox//ShopCheck店铺全选的按钮//commlistFrm店铺商品的模块//allCh ...
- 让DuiLib CheckBox支持全选、全不选、非全选三种状态
原文 https://blog.csdn.net/EveyX/article/details/38433783 DuiLib官方库中的Checkbox只有Checked和Uncheck两种状态,但我们 ...
随机推荐
- css远距离链接
远距离链接主要运用了hover伪类,但是运用了两次 <!DOCTYPE html> <html lang="en"> <head> <me ...
- WebServiceWSDLWeb
WSDL 文档仅仅是一个简单的 XML 文档. 它包含一系列描述某个 web service 的定义. WSDL 文档是利用这些主要的元素来描述某个 web service 的: 元素 定义 < ...
- 开源的.NET媒体文件操作组件TagLib#解析
人生得意须尽欢 莫使金樽空对月.写博客都会在吃饭后,每次吃饭都要喝上二两小酒,写博客前都要闲扯,这些都是个人爱好,改不掉了,看不惯的人,还望多多包含一下,有相同爱好的同学,咱们可以一起喝着小酒一边吹牛 ...
- go单元测试进阶篇
作者介绍:熊训德(英文名:Sundy),16年毕业于四川大学大学并加入腾讯.目前在腾讯云从事hadoop生态相关的云存储和计算等后台开发,喜欢并专注于研究大数据.虚拟化和人工智能等相关技术. 本文档说 ...
- 20155205 2016-2017-2 《Java程序设计》第4周学习总结
20155205 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 private成员会被继承,只不过子类无法直接存取,必须通过父类提供的方法来存取(若 ...
- 2 Java对象的创建过程
JAVA中创建对象直接new创建一个对象,对么对象的创建过程是怎样的呢? 程序运行过程中有许多的对象被创建出来.那么对象是如何创建的呢? 一 对象创建的步骤 1 遇到new指令时,检查这个指令的参数是 ...
- yii框架数据库操作数据访问对象(DAO)简单总结
Yii提供了强大的数据库编程支持.Yii数据访问对象(DAO)建立在PHP的数据对象(PDO)extension上,使得在一个单一的统一的接口可以访问不同的数据库管理系统(DBMS).使用Yii的DA ...
- meta 整理
< meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...
- JsonResult,Controller.Json
表示一个类,该类用于将 JSON 格式的内容发送到响应. ContentEncoding:编码格式(最好按标准utf-8) ContentType: mime类型 Data:数据设置 JsonRequ ...
- netty——私有协议栈开发案例
netty--私有协议栈开发案例 摘要: 在学习李林峰老师的Netty权威指南中,觉得第十二章<私有协议栈开发>中的案例代码比较有代表性,讲的也不错,但是代码中个人认为有些简单的错误,个人 ...