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两种状态,但我们 ...
随机推荐
- 老李推荐:第14章9节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-遍历控件树查找控件
老李推荐:第14章9节<MonkeyRunner源码剖析> HierarchyViewer实现原理-遍历控件树查找控件 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员 ...
- 老李推荐:第14章8节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-获取控件列表并建立控件树 5
看这段代码之前还是请回到“图13-6-1 NotesList控件列表”中重温一下一个控件的每个属性名和值是怎么组织起来的: android.widget.FrameLayout@41901ab0 dr ...
- 第一章开发简单的Java应用程序
1.什么是程序? 程序一词来源于生活,通俗点讲就是把生活的的事用程序编写出来 并执行. 2.为什么要学习Java呢? Java是Sun Microsystems于1995年推出的高级编程语言 Java ...
- java开发中经典的三大框架SSH
首先我们要明白什么是框架为什么用?相信一开始学习编程的时候都会听到什么.什么框架之类的:首先框架是一个软件半成品,都会预先实现一些通用功能,使用框架直接应用这些通用功能而不用重新实现,所以大多数企业都 ...
- css form表单样式清除
开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...
- 程序设计 之 C#实现《拼图游戏》
功能描述: 1.用户自定义上传图片 2.游戏难度选择:简单(3*3).一般(5*5).困难(9*9)三个级别 3.纪录完成步数 模块: 1.拼图类 2.配置类 3.游戏菜单窗口 4.游戏运行窗口 -- ...
- 代码编写规范说明书(c#.net与asp.net)
代码编写规范说明书(c#.net与asp.net) 目 录1 目的2 范围3 注释规范3.1 概述3.2 自建代码文件注释3.3 模块(类)注释3.4 类属性注释3.5 方法注释3.6 代码间注释4 ...
- redis 字符串
redis 字符串 概述 redis 没有使用 c 语言风格的字符串表示(以 "\0" 作为结尾), 而是使用自定义的 sds 结构 字符串结构 定义位置 (src/sds.h) ...
- 自己实现的string的库函数
为了更好地理解string的各个库函数,现将几个常用的库函数用自己的方式实现如下: #include<iostream> using namespace std; #include< ...
- PMBOK 学习与实践分享视频
本系列为自己在学习PMBOK时进行的总结与分享,每一节主要包括两部分: 对PMBOK本身的一个结构笔记和讲解. 对自己项目管理工作的一个总结和思考. PMBOK 学习与实践分享视频内容清单 人力资源管 ...