简单的jquery模仿复选框全选全不选功能

照样,在此我把关键代码贴出来,css样式我为了简单,就单纯的是在选中后,更换了一张背景图片而已。

jquery代码:

 	$(function(){
        		$(" span.zdy-icon-radio").click(function(){
        			$(this).toggleClass("active");
        		});

                 $("#checkall").click(function(){

			if($(this).hasClass(‘active‘)){				 //如果当前点击的多选框被选中
				 $(‘.gwc-bg span.zdy-icon-radio‘).addClass("active");
			}else{
			     $(‘.gwc-bg span.zdy-icon-radio‘).removeClass("active");
			}
	 });
	 });

html代码:

<div class="xp-content02">
			<div class="headertop mui-clearfix order-border" >
				<div class="left_welcome">
					<a href="../index.html">秀品</a>
				</div>
				<div class="right_pleaseLogin">
					请先[<a href="login.html">登录</a>或[<a href="register.html">注册</a> ]
					<i class="iconfont"></i> <a href="#">购物车 </a><span class="cs">0</span> 件
				</div>
			</div>
			<div class="tt02">
				购物车
			</div>
		   <div class="gouwuche">
		   	   <li class="mui-table-view-cell">
		   	   	   <div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="orde-pay-baobei mui-slider-handle" >
					<div class="order-title mui-clearfix">
						<a href="#">编辑</a>
						<a href="#" >
							<span><img src="../img/shop_small_logo.jpg" /></span>
							<span>(Ditto)迪图女装专卖</span>
							<div class="choose-yours02"></div>
						</a>
					</div>
					<div class="order-baobeiCon gwc-bg mui-clearfix">
						<div class="grc-lf">
							<span class="zdy-icon-radio"></span>
						</div>
						<div class="small-img-lef"><img src="../img/order01.jpg"/> </div>
						<div class="baobei-intro-rt wt06" >
							<p class="baobei-title"><a href="#"> 2016春夏季女装新款 重工卡通徽章贴布冰丝...</a></p>
							<p class="gmsl"><span>x 1</span>颜色分类:黑色,尺码 L</p>
							<p class="hs">¥ 259.00</p>
						</div>
					</div>
				</div>
				</li>
				<div class="greybg02"></div>
				<li class="mui-table-view-cell">
		   	   	   <div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red">删除</a>
					</div>
					<div class="orde-pay-baobei mui-slider-handle" >
					<div class="order-title mui-clearfix">
						<a href="#">编辑</a>
						<a href="#" >
							<span><img src="../img/shop_small_logo.jpg" /></span>
							<span>(Ditto)迪图女装专卖</span>
							<div class="choose-yours02"></div>
						</a>
					</div>
					<div class="gwc-bg mui-clearfix">
						<div class="grc-lf">
							<span class="zdy-icon-radio active"></span>
						</div>
						<div class="small-img-lef"><img src="../img/order01.jpg"/> </div>
						<div class="baobei-intro-rt wt06" >
							<p class="baobei-title"><a href="#"> 2016春夏季女装新款 重工卡通徽章贴布冰丝...</a></p>
							<p class="gmsl"><span>x 1</span>颜色分类:黑色,尺码 L</p>
							<p class="hs">¥ 259.00</p>
						</div>
					</div>
				</div>
				</li>
				<div class="greybg02"></div>

		   </div>
		   <div class="gouwuche-jiesuan">
		   	<div class="grc-lf quanxuan">
							<span class="zdy-icon-radio " id="checkall">全选</span>
			</div>
			<div class="heji">
				合计:<span>¥259.00</span>
			</div>
			<div class="jiesuan">
				<a href="submit-order.html">结算</a>
			</div>
		   </div>
		</div>

效果图预览:

时间: 06-26

简单的jquery模仿复选框全选全不选功能的相关文章

js 全选选框与取消全选代码

设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script> var a=document.getElementById("a"); var b=document.getElementsByClassName("b"); //全选与取消全选 var y=true; a.onchange=function(){ if(a.c

简单的jquery模仿单选按钮效果

刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可. 而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可.鉴于自己工作是循环列表模式,每个<li>里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天. <!DOCT

复选框选择全部或只选单个

//html网页代码 <tr> <td> <input type="checkbox" name="vehicle_qx" id="vehicle_qx" value="0" onclick="vehicle_qx(0)"/><font>全部</font> <input type="checkbox" name="

复选框的全选(引自锋利的jQuery)

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta name="generator" content="text/html" charset="utf-8" /> 5 <title>复选框组的全选/非全选</title> 6 <script

用jquery实现复选框全选全不选问题(完整版),在网络上怎么也找不到完整的解决方案,重要搞全了

首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="selectAll"value="全选"/>全选<br> <input type="checkbox" name="hobby"value="足球"/>足球 <input type=&qu

【jQuery】复选框的批量处理:全选、非全选

最近工作都在写jQuery,事实上我并没有系统学过js,今天跟大家分享一下最近写的一个有关复选框的批量处理. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> </head> <body> <input type="button" class="button&quo

Axure 7.0实现复选框全选和取消全选

使用Axure原型工具对产品进行设计,使用复选框来实现全选中和全取消效果,也可以利用按钮或文字做为开关来控制效果,下面主要介绍使用复选框来实现全选中和全取消效果. 1/1 首先输入复选框效果的文字,并为每个复选框建立名称,方便后期对其辨认,例如:选择你最喜欢居住的城市,建立一个全选的复选框进行全选or取消全选效果 1/2 设置全选中 1/2/1 选择全选复选框,双击(选中状态改变时),打开新增用例对话框 1/2/2  设置用例名称,设置条件判断为真 1/2/3 选择(选中),勾选需要被选中的复选

js实现复选框的操作-------Day41

不知道之前的一篇为什么一直处于审核阶段.难道有哪个词语是敏感词被河蟹了? 无论了,又一次写了这篇,也算是加深记忆吧. 首先要写的是今天在进行表格数据操作时用到的对复选框checkbox的全选和全不选,首先来编写下html语言 <table> <thead> <tr> <td><input type="checkbox" id="sall" onchange="changeAll()">&

JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和操作radio的方式相似,都是利用元素项的checked属性来完成.先获取checkbox元素集合,遍历集合,对集合中的每一项做操作. 这里讲几个常用的checkbox复选框的常见示例. 取值 给定页面 <body> <p> <label for="hobby">Hobby:   <input type="checkbox" name="hobby" val