购物车表单

最新推荐文章于 2022-09-29 16:27:17 发布
最新推荐文章于 2022-09-29 16:27:17 发布
阅读量751 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiyangmeng/article/details/80189674
版权

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="购物车"
        android:textColor="#ff3660"
        android:textSize="25sp" />

    <ExpandableListView
        android:id="@+id/elv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:gravity="center_vertical">

        <CheckBox
            android:id="@+id/checkbox2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:focusable="false" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/checkbox2"
            android:gravity="center_vertical"
            android:text="全选"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="合计 ：" />


            <TextView
                android:id="@+id/tv_price"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:paddingRight="10dp"
                android:text="0"
                android:textColor="@android:color/holo_red_light" />


            <TextView
                android:id="@+id/tv_num"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:background="@android:color/holo_red_dark"
                android:gravity="center"
                android:padding="10dp"
                android:text="结算(0)"
                android:textColor="@android:color/white" />
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>
 

子布局：
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:fresco="http://schemas.android.com/tools">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal">

        <CheckBox
            android:id="@+id/cb_child"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:focusable="false" />


        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/my_image_view"
            android:layout_width="80dp"

            android:layout_height="80dp"
            fresco:placeholderImage="@mipmap/ic_launcher" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_tel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:singleLine="true"
                    android:text="iphone6"

                    />

                <TextView
                    android:id="@+id/tv_pri"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="¥3000.00"

                    />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:gravity="center_vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal">

                        <Button
                            android:id="@+id/but_delete"
                            android:layout_width="22dp"
                            android:layout_height="22dp"
                            android:background="@drawable/remove" />

                        <TextView
                            android:id="@+id/et_number"
                            android:layout_width="40dp"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:inputType="number"

                            />

                        <Button
                            android:id="@+id/but_add"
                            android:layout_width="20dp"
                            android:layout_height="20dp"
                            android:background="@drawable/add" />
                    </LinearLayout>
                </LinearLayout>

            </LinearLayout>

            <TextView
                android:id="@+id/tv_del"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_marginTop="25dp"
                android:gravity="center"
                android:text="删除" />
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

 

主页面：
 

package com.example.com.moni.fragment;

import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.CheckBox;

import android.widget.ExpandableListView;
import android.widget.TextView;


import com.example.com.moni.R;
import com.example.com.moni.abapter.SeeExpandableListAdapter;

import com.example.com.moni.bean.SeeBean;
import com.example.com.moni.inter.IView;
import com.example.com.moni.presenter.SeePresenter;

import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

/**
 * Created by 丶未央 on 2018/5/1.
 */

public class Fragmentfour extends Fragment implements IView<SeeBean>,SeeExpandableListAdapter.ChangeData {
    @BindView(R.id.elv)
    ExpandableListView elv;
    @BindView(R.id.checkbox2)
    CheckBox checkbox2;
    @BindView(R.id.tv_price)
    TextView tvPrice;
    @BindView(R.id.tv_num)
    TextView tvNum;
    Unbinder unbinder;
    private SeePresenter seePresenter;
    private int uid;

    private List<SeeBean.DataBean> listAll = new ArrayList<>();
    private SeeExpandableListAdapter adapter;
    private List<SeeBean.DataBean> data;
    private List<SeeBean.DataBean.ItemBean> list;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.four, container, false);
        unbinder = ButterKnife.bind(this, view);

        SharedPreferences addShop = getActivity().getSharedPreferences("addShop", Context.MODE_PRIVATE);
        uid = addShop.getInt("uid", 0);
        seePresenter = new SeePresenter(this);
        seePresenter.getData(uid + "");




        checkbox2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(checkbox2.isChecked()){
                    for (int i = 0; i < data.size(); i++) {
                        SeeBean.DataBean dataBean = data.get(i);
                        dataBean.setIscheck(true);
                        for (int j = 0; j < dataBean.getList().size(); j++) {
                            SeeBean.DataBean.ItemBean itemBean = dataBean.getList().get(j);
                            itemBean.setIsscheck(true);
                        }
                    }
                }else {
                    for (int i = 0; i < data.size(); i++) {
                        SeeBean.DataBean dataBean = data.get(i);
                        dataBean.setIscheck(false);
                        for (int j = 0; j < dataBean.getList().size(); j++) {
                            SeeBean.DataBean.ItemBean itemBean = dataBean.getList().get(j);
                            itemBean.setIsscheck(false);
                        }
                    }
                }
                getMoney();
            }
        });
        return view;

    }

    @Override
    public void OnSuccess(SeeBean seeBean) {
        data = seeBean.getData();

        listAll.clear();
        listAll.addAll(data);
        adapter = new SeeExpandableListAdapter(getActivity(),listAll);
        elv.setAdapter(adapter);
        adapter.setShoping(Fragmentfour.this);
        for (int i = 0; i < data.size(); i++) {
            elv.expandGroup(i);
        }

    }

    @Override
    public void onHiddenChanged(boolean hidden) {

        getData();

        super.onHiddenChanged(hidden);
    }

    private void getData() {

        seePresenter.getData(uid+"");

    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }

    private void getMoney() {
        DecimalFormat df   = new DecimalFormat("######0.00");

        double zon = 0;
        int num = 0;
        for (int i = 0; i < listAll.size(); i++) {
            list = listAll.get(i).getList();
            for (int j = 0; j < list.size() ; j++) {
                if(list.get(j).isIsscheck()){
                    zon += list.get(j).getNum() * list.get(j).getPrice();
                    num += list.get(j).getNum();
                }

            }
        }
        tvPrice.setText("总价：" + df.format(zon));
        tvNum.setText("结算（"+num+"）");
        adapter.notifyDataSetChanged();
    }

    @Override
    public void jiaNum(int i, int position) {

        List<SeeBean.DataBean.ItemBean> listone = data.get(i).getList();
        int num = listone.get(position).getNum();
        num++;
        listone.get(position).setNum(num);

        getMoney();
    }

    @Override
    public void jianNum(int i, int position, Button but) {
        List<SeeBean.DataBean.ItemBean> listone = data.get(i).getList();
        int num = listone.get(position).getNum();
        num--;
        listone.get(position).setNum(num);

        getMoney();
    }

    @Override
    public void click(int i,int i1,boolean checked) {

        data.get(i).getList().get(i1).setIsscheck(checked);

        getMoney();
    }

    @Override
    public void groupclick(int i, boolean ischeck) {
        data.get(i).setIscheck(ischeck);

        List<SeeBean.DataBean.ItemBean> list = data.get(i).getList();

        for (int j = 0; j < list.size(); j++) {
            if(data.get(i).isIscheck()){
                list.get(j).setIsscheck(true);
            }else{
                list.get(j).setIsscheck(false);
            }
        }

        getMoney();
    }

    @Override
    public void removeMoney() {
        getMoney();
    }








}


 

 

适配器：
 

package com.example.com.moni.abapter;

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.net.Uri;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.com.moni.R;
import com.example.com.moni.bean.SeeBean;
import com.facebook.drawee.view.SimpleDraweeView;

import java.util.List;

/**
 * Created by 丶未央 on 2018/5/3.
 */

public class SeeExpandableListAdapter extends BaseExpandableListAdapter{
    Context context;
    List<SeeBean.DataBean> data;
    List<SeeBean.DataBean.ItemBean> list;
    public SeeExpandableListAdapter(Context context, List<SeeBean.DataBean> data) {
        this.context=context;
        this.data=data;
    }

    ChangeData changeData;

    public void setShoping(ChangeData changeData){
        this.changeData = changeData;
    }

    @Override
    public int getGroupCount() {
        return data.size();
    }

    @Override
    public int getChildrenCount(int i) {
        return data.get(i).getList().size();
    }

    @Override
    public Object getGroup(int i) {
        return data.get(i);
    }

    @Override
    public Object getChild(int i, int i1) {
        return data.get(i).getList().get(i1);
    }

    @Override
    public long getGroupId(int i) {
        return i;
    }

    @Override
    public long getChildId(int i, int i1) {
        return i1;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public View getGroupView(final int i, boolean b, View view, ViewGroup viewGroup) {
        final GroupViewHolder holder;
        if (view == null) {
            holder = new GroupViewHolder();
            view = view.inflate(context, R.layout.shouitemone, null);
            holder.ck = view.findViewById(R.id.cb_parent);
            holder.name = view.findViewById(R.id.tv_number);
            view.setTag(holder);
        } else {
            holder = (GroupViewHolder) view.getTag();
        }
        final SeeBean.DataBean dataBean = data.get(i);
        holder.ck.setChecked(dataBean.isIscheck());
//        holder.tv_number.setText(dataBean.getTitle());
        holder.name.setText(dataBean.getSellerName());

        //一级checkbox
        holder.ck.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                changeData.groupclick(i,holder.ck.isChecked());
            }
        });

        return view;
    }

    @Override
    public View getChildView(final int i, final int i1, final boolean b, View view, ViewGroup viewGroup) {
        final ChildViewHolder holder;
        if (view == null) {
            holder = new ChildViewHolder();
            view = view.inflate(context,R.layout.shouitemtwo, null);
            holder.cck = view.findViewById(R.id.cb_child);
            holder.name = view.findViewById(R.id.tv_tel);
            holder.num =view.findViewById(R.id.et_number);
            holder.img = (SimpleDraweeView) view.findViewById(R.id.my_image_view);
            holder.price = view.findViewById(R.id.tv_pri);
            holder.rem = view.findViewById(R.id.tv_del);
            holder.add = view.findViewById(R.id.but_add);
            holder.delete = view.findViewById(R.id.but_delete);
            view.setTag(holder);
        } else {
            holder = (ChildViewHolder) view.getTag();
        }
        final SeeBean.DataBean.ItemBean datasBean = data.get(i).getList().get(i1);

        holder.cck.setChecked(datasBean.isIsscheck());
        holder.name.setText(datasBean.getTitle());

        holder.price.setText("￥"+datasBean.getPrice() );

        if(datasBean.getNum() == 1){
            holder.delete.setEnabled(false);
        } else{
            holder.delete.setEnabled(true);
        }
        holder.num.setText(datasBean.getNum()+"");

        String images = datasBean.getImages().trim();
        String[] split = images.split("[\\|]");
        holder.img.setImageURI(Uri.parse(split[0]));

        //删除
        holder.rem.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AlertDialog.Builder builder = new AlertDialog.Builder(context);
                builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        list.get(i).setIsscheck(false);
                        changeData.removeMoney();
                        list.remove(i);

                        notifyDataSetChanged();
                    }
                });
                builder.setTitle("警告");
                builder.setMessage("确定删除嘛？");
                builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                builder.show();

            }
        });

        //加
        holder.add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeData.jiaNum(i,i1);
            }
        });
        //减
        holder.delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeData.jianNum(i,i1,holder.delete);
            }
        });

        //二级checkbox
       holder.cck.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //设置该条目对象里的checked属性值
                changeData.click(i,i1,holder.cck.isChecked());
            }
        });


        return view;
    }

    @Override
    public boolean isChildSelectable(int i, int i1) {
        return true;
    }
    class GroupViewHolder{
        CheckBox ck;
        TextView name;
    }
    class ChildViewHolder{
        CheckBox cck;
        ImageView img;
        TextView name,price,num,rem;
        Button add,delete;
    }
    public interface ChangeData{
        void jiaNum(int i, int i1);
        void jianNum(int i, int i1, Button but);
        void click(int i,int i1,boolean ischeck);
        void groupclick(int i,boolean ischeck);
        void removeMoney();
    }
}


 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  无名的怀
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
【Java EE】用表单实现建议的购物车页面和购物信息确认页面

				
			

			

				

					weixin_43354214的博客
				

				

					03-29
					
					825
					
				

			

		

		

			
				
在多页面之间传递数据的方法有3种简单的方法：
（1）查询字符串URL
（2）内置对象：request session application
（3）表单
目标：完成一个购物车页面和一个订单信息确认页面，在购物车页面提交表单后，可以在订单信息确认页面显示订单的信息
实现途径：表单传递数据
如下图：
购物车页面

订单信息确认页面

首先创建购物车页面（Car.jsp）
<%@ page lan...

			
		

	



                

              
                



	

		

			

				
					
jQuery实现购物车表单自动结算效果实例

				
			

			

				

					12-08
				

			

		

		

			
				
在本实例中，我们将探讨如何使用jQuery来实现一个购物车表单的自动结算功能，类似于淘宝等电商网站的购物车结算流程。这个功能的核心在于，当用户修改购物车内商品的数量时，无需刷新页面，系统就能实时计算出商品的...

			
		

	



                


  
              

                


	

		

			

				
					
jquery学习笔记-购物车表单简单实现

				
			

			

				

					mysuc的专栏
				

				

					07-15
					
					973
					
				

			

		

		

			
				
购物车主html代码：

			
		

	





	

		

			

				
					
HCI第三篇：表单应用：按钮之购物车

				
			

			

				

					H_W_1212的博客
				

				

					04-21
					
					500
					
				

			

		

		

			
				
在学习表单的相关知识后，尝试做了一个页面，话不多说，直接看结果：

结果比较简陋，大家下来有空可以进行美化。这里我提供一下源码：
1.index.html页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物数量统计</title>
<meta ...

			
		

	



		

			
		



	

		

			

				
					
软件三层设计入门-表单校验，购物车

				
			

			

				

					danny1991的博客
				

				

					02-05
					
					637
					
				

			

		

		

			
				
1.搭建开发环境
        1.1 导入项目所需的开发包
                dom4j-1.6.1.jar
                jaxen-1.1-beta-6.jar
                commons-beanutils-1.8.0.jar
                commons-logging.jar

			
		

	





	

		

			

				
					
第十四篇 表单控件 - 购物车页面

				
			

			

				

					灵魂学者的博客
				

				

					09-29
					
					894
					
				

			

		

		

			
				
这一篇内容主要结合之前讲的内容用实现购物车页面当中的一些功能，完成一个基本的购物车页面效果；

			
		

	





	

		

			

				
					
全选按钮和取消全选按钮，购物车表单

				
			

			

				

					04-24
				

			

		

		

			
				
要实现全选按钮和取消全选按钮功能，可以在购物车表单中添加一个全选的复选框。当全选复选框被选中时，购物车表单中的所有商品都应该被选中，否则所有商品都取消选中。要实现这个功能，可以使用JavaScript跟踪复选框...

			
		

	





	

		

			

				
					
jQuery购物车自动计算金额表单适应于商城购物结算.zip

				
			

			

				

					11-17
				

			

		

		

			
				
7. **响应式设计**：对于适应不同设备的商城，还需要考虑购物车表单的响应式布局。jQuery可以配合CSS框架（如Bootstrap）或自定义媒体查询，使购物车在手机、平板和桌面设备上都能正确显示。  总的来说，"jQuery...

			
		

	





	

		

			

				
					
jQuery购物车自动计算金额表单特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
"jQuery购物车自动计算金额表单特效代码"是一个实用的解决方案，旨在简化这个过程，为用户提供流畅的购物体验。这个代码利用了jQuery库的强大功能，实现了动态计算购物车中商品的总价格，并在用户添加或移除商品时...

			
		

	





	

		

			

				
					
AangularJS运用bootstrap.js结合创建购物表单

				
			

			

				

					Myworldlet的博客
				

				

					09-17
					
					360
					
				

			

		

		

			
				
购物
    
//导入这三个js使用
    
    
    
    
        span{padding-left:50px;padding-right:50px;}
    
    
//angular 在最跟处创建ng-app 和controller 相当于确定控制的入口
        var app=angular.module('myApp',[]

			
		

	





	

		

			

				
					
django 购物系统 - 添加至购物车表单

				
			

			

				

					valexchao的博客
				

				

					05-12
					
					1466
					
				

			

		

		

			
				
商品的详情页面的添加至购物车表单
定义form
class ProductAddToCartForm(forms.Form):
    quantity = forms.IntegerField(label='数量',
                                  widget=forms.TextInput(
                              

			
		

	





	

		

			

				
					
05-vue表单绑定与购物车实例

				
			

			

				

					weixin_42699636的博客
				

				

					09-01
					
					280
					
				

			

		

		

			
				
vue表单绑定与购物车实例
1.1 v-model在复选框中的使用
在复选框中使用v-model指令，一般会作用在一个数组上。
<div id="box">
  <!-- 
      v-model="checkArray": 
      checkArray:为数组，所有选中的checkbox的value都会添加到数组中，取消选中时会自动从数组中删除该value。
      注意：这里一定要给checkbox添加上value属性
  -->
  <input type=

			
		

	





	

		

			

				
					
B2C表单和购物流程设计要点

				
			

			

				

					限量发行的专栏
				

				

					10-14
					
					858
					
				

			

		

		

			
				
表单设计的要点

1. 概述

表单对客户来说是很烦人的，但它对在线处理很重要，让填写表单的过程简单、快速，才能让网站快速获取潜在的利益。

2. 访客的问题

你作为访客，在支付中一般会有哪些问题？

当访客遇到表单时，他们的问题集中在外观、所需信息的合理性，以及安全性这几个方面。

在对表单快速瞟一眼以后，他们就会思考以下几个问题：

1、我要从哪开始填？

2

			
		

	





	

		

			

				
					
购物网站26：购物FORM---购物车----配送信息-----购物完成

				
			

			

				

					sha_xinyu的专栏
				

				

					09-01
					
					565
					
				

			

		

		

			
				
public class BuyCartForm extends BaseForm { private Integer productid; private Integer styleid; private String directUrl; public String getDirectUrl() {  return directUrl==null? "" : this.directUrl;

			
		

	





	

		

			

				
					
dj电商-数据表的设计-购物车表与订单表设计

				
			

			

				

					pyhui的技术博客
				

				

					09-15
					
					7508
					
				

			

		

		

			
				
购物车，商品数量
用户的购买数量不应该超过库存的数量
使用redis实现购物车的功能
原因
如果通过mysql查询数据库，浪费性能
通过redis来查，速度更快
订单
点击去结算，进入订单


》订单表要有的内容
地址
支付方式
商品
总金额
运费
》用户中心，全部订单

订单编号
支付状态
订单的创建时间
订单表当前状态

需要分表了
一个订单需要对应多个商品
来一个订单商品表
订单商品表需...

			
		

	





	

		

			

				
					
JavaWeb html+js创建购物车表单以及连接数据库部分代码提示

				
			

			

				

					weixin_43275631的博客
				

				

					12-28
					
					2232
					
				

			

		

		

			
				
因为大作业需要设置购物车，并能从用户所在数据库表中导出，所以找到了一个购物车模版，运行之后状态如下：
**
index.html：
**
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css" />
		<script type

			
		

	





	

		

			

				
					
jQuery实现购物车表单自动结算

				
			

			

				

					笑笑
				

				

					08-19
					
					3384
					
				

			

		

		

			
				
http://www.codefans.net/jscss/code/4903.shtml?jdfwkey=jlfkb1







 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

jQuery购物车表单自动结算

*{margin:0;

			
		

	





	

		

			

				
					
Vue实现简单的购物车、表单添加

				
			

			

				

					qq_38318589的博客
				

				

					10-15
					
					710
					
				

			

		

		

			
				
Vue实现简单的购物车、表单添加

			
		

	





	

		

			

				
					
js全选按钮和取消全选按钮，购物车表单

					
最新发布

				
			

			

				

					04-24
				

			

		

		

			
				
如何实现？

对于实现购物车表单的全选按钮和取消全选按钮，以下是应该考虑的步骤：

1. 在购物车表单前面增加一个全选复选框，用于选择或取消所有复选框。

2. 针对每个商品的复选框，增加一个点击事件，当点击复选框时，根据复选框的选中状态更新购物车总价。

3. 在全选复选框的点击事件中，对所有商品的复选框进行选中或取消选中操作，并重新计算购物车总价。

下面是可能的实现代码：

HTML代码：

```html
<!-- 全选/取消全选按钮 -->
<input type="checkbox" id="select-all">全选/取消全选
<br>
<!-- 商品列表 -->
<table>
  <tr>
    <th>商品名称</th>
    <th>价格</th>
    <th>选择</th>
  </tr>
  <tr>
    <td>商品1</td>
    <td>10元</td>
    <td><input type="checkbox" class="item-checkbox" value="10"></td>
  </tr>
  <tr>
    <td>商品2</td>
    <td>20元</td>
    <td><input type="checkbox" class="item-checkbox" value="20"></td>
  </tr>
  <tr>
    <td>商品3</td>
    <td>30元</td>
    <td><input type="checkbox" class="item-checkbox" value="30"></td>
  </tr>
</table>
<!-- 购物车总价 -->
总价：<span id="total-price">0元</span>
```

JavaScript代码：

```javascript
// 获取全选/取消全选按钮和商品复选框
let selectAllCheckbox = document.getElementById("select-all");
let itemCheckboxes = document.querySelectorAll(".item-checkbox");

// 为全选/取消全选按钮添加点击事件
selectAllCheckbox.addEventListener("click", function() {
  // 更新商品复选框状态
  itemCheckboxes.forEach(function(item) {
    item.checked = selectAllCheckbox.checked;
  });
  // 计算购物车总价
  let totalPrice = 0;
  itemCheckboxes.forEach(function(item) {
    if (item.checked) {
      totalPrice += Number(item.value);
    }
  });
  document.getElementById("total-price").innerHTML = totalPrice + "元";
});

// 为商品复选框添加点击事件
itemCheckboxes.forEach(function(item) {
  item.addEventListener("click", function() {
    // 计算购物车总价
    let totalPrice = 0;
    itemCheckboxes.forEach(function(item) {
      if (item.checked) {
        totalPrice += Number(item.value);
      }
    });
    document.getElementById("total-price").innerHTML = totalPrice + "元";
    // 更新全选/取消全选按钮状态
    selectAllCheckbox.checked = (itemCheckboxes.length == document.querySelectorAll(".item-checkbox:checked").length);
  });
});
``` 

希望这个回答能够帮到您！

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值