購物車的全選,全不選,局部全選,全選判定是常見的網站效果,本例子是以前寫過的一個購物車頁面,有興趣的小夥伴可以互相探討一下。
效果圖:

一個購物車的頁面,其中購物車中有各個店鋪的商品,每個店鋪的商品可以全選當前店鋪的全部商品,所以店鋪跟店鋪之間的全選互不影響。
html代碼:

由於代碼過長,循環的列表部分我就不統一截圖出來,圖中紅框的部分是全選複選框跟商品複選框的標籤。
複選框的樣式應用了一個圖片來美化,拋棄了默認的樣式,有興趣的小夥伴可以自己修改自己的樣式,這裡主要是應用了圖片來顯示那個選擇的勾;主要的css樣式如下:

:checked為當前的複選框選中,然後切換背景圖,就出現效果圖中的樣式了;
下面來看如何實現全選的JQ代碼:

代碼中詳細的注釋了功能語句,大家可以參考。
原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/274320.html