原生js、jQuery、小程序实现购物车功能

购物车功能在前端开发中经常会遇到，所以小编我在这里为大家提供了元素js、jQuery和小程序的写法，可以直接复制代码看效果哦！PS：记得更换自己的图片。

点击代码详情查看所有代码！

原生js和jQuery

原生js和jQuery的HTML代码

<div class="container">
	<section class="all_check_wrap">
		 <label for="all_check" class="checkbox_label">全选</label>
		 <input id="all_check"  type="checkbox">
	</section>
	<section class="img_check_wrap">
		<div class="item_wrap">
			<img src="../images/dingdong1.jpg" alt="">
			<input class="item_check" type="checkbox" name="" id="check0" value="" />
		</div>
		<div class="item_wrap">
			<img src="../images/dingdong2.jpg" alt="">
			<input class="item_check" type="checkbox" name="" id="check1" value="" />
		</div>
		<div class="item_wrap">
			<img src="../images/dingdong3.jpg" alt="">
			<input class="item_check" type="checkbox" name="" id="check2" value="" />
		</div>
	</section>
</div>

原生js代码

// 全选
var all_check=document.getElementById('all_check');
// 所以单选
var item_check_arr=document.getElementsByClassName('item_check');
// 全选绑定点击事件
all_check.addEventListener('click',check_fun);

// 每个选择绑定点击事件
for(var i=0;i<item_check_arr.length;i++){
	item_check_arr[i].addEventListener('click',check_fun);
}

// 选择函数
function check_fun(){
	if(all_check===this){//点击的是全选
		for(var i=0;i<item_check_arr.length;i++){
			item_check_arr[i].checked=all_check.checked;
		}
		return ;
	}else{//点击的是每个选择input
		for(var i=0;i<item_check_arr.length;i++){
			var check_arr=document.getElementById('check'+i).checked;
			if(!check_arr){//只要有一个没选中则全选不选中
				all_check.checked=false;
				return ;
			}else{
				all_check.checked=true;
			}
			
		}
	}
}

jquery代码

// 全选
var all_check=$('#all_check');
// 所以单选
var item_check_arr=$('.item_check');
// 全选绑定点击事件
all_check.bind('click',check_fun);

// 每个选择绑定点击事件
for(var i=0;i<item_check_arr.length;i++){
	$('#check'+i).bind('click',check_fun);
}

// 选择函数
function check_fun(){
	if(all_check[0]===this){//点击的是全选
		for(var i=0;i<item_check_arr.length;i++){
			$("#check"+i).prop('checked',all_check.prop('checked'));
			// $("#check"+i).prop('checked',all_check.is(':checked'));
		}
		return ;
	}else{//点击的是每个选择input
		for(var i=0;i<item_check_arr.length;i++){
			var check_arr=$("#check"+i).prop('checked');
			if(!check_arr){//只要有一个没选中则全选不选中
				all_check.prop('checked',false);
				return ;
			}else{
				all_check.prop('checked',true);
			}
		}
	}
}

小程序

wxml代码

<view class="container">
  <view class="all_check_wrap">
    <text for="all_check" class="checkbox_text">全选</text>
    <checkbox-group bindchange='all_check_change'>
      <checkbox checked="{{all_check_arr[0]}}"></checkbox>
    </checkbox-group>
  </view>
  <view class="image_check_wrap">
    <checkbox-group bindchange='item_check_change' wx:for="{{check_arr}}" wx:for-index="index" wx:for-item="item" wx:key='index' data-index="{{index}}" class="item_wrap">
      <image mode='aspectFit' src="../../images/dingdong1.jpg" alt=""></image>
      <checkbox data-index="{{index}}" checked="{{item}}"></checkbox>
    </checkbox-group>

  </view>
</view>

js代码

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    all_check_arr:[false],
    check_arr:[false,false,false]
  },
  
  onLoad: function () {
    
  },
  // 点击全选复选框
  all_check_change(e){
    let check_arr_length = this.data.check_arr.length;
    let check_arr = new Array(check_arr_length).fill(false);
    if (e.detail.value[0]==""){
      check_arr = new Array(check_arr_length).fill(true);
    }
    this.setData({
      check_arr: check_arr
    })
  },
  // 点击每个复选框
  item_check_change(e){
    let index = e.currentTarget.dataset.index;
    let check_arr = this.data.check_arr;
    let all_check_arr = this.data.all_check_arr;
    if (e.detail.value[0] == ""){
      check_arr[index] = true; // 设置选择的复选框的checked值
    }else{
      check_arr[index] = false; // 设置选择的复选框的checked值
      all_check_arr = [false];//只要有一个复选框没选中，则全选不选中
    }
    if (check_arr.indexOf(false)==-1){//复选框全部选中，全选复选框选中
      all_check_arr= [true];
    }
    this.setData({
      check_arr: check_arr,
      all_check_arr: all_check_arr
    })
  }
})