照樣，在此我把關鍵代碼貼出來，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">&#xe60d;</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>

效果圖預覽：

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：簡單的jquery模仿復選框全選全不選功能-創新互聯
當前URL：http://vcdvsql.cn/article38/cseipp.html

成都網站建設公司_創新互聯，為您提供小程序開發、外貿建站、域名注冊、做網站、網站排名、網站內鏈

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯