本文介绍了一个使用JavaScript编写的简单购物车模型。包括全选复选框功能，文本输入框动态计算价格，以及总价根据选中商品计算。通过分析业务逻辑，详细阐述了复选框、文本输入框和总价计算的编程思路，并提供了相关代码实现。
在这里为大家展示一个用JS编写的简单的购物车模型图形如下：
一、先来分析这小程序结构：
1、一个表格、表格中镶嵌了四个复选框，三个文本输入框
二、介绍业务内容：
1、复选框业务：点击全选下的复选框，其图三个复选框也会全部选中；点击全选后，随意取消一个选项，全选选项也会自动取消；当除全选选项其它选项全部点中时，全选自动变成选中状态
2、文本输入框业务：当文本框输入数量时，当前行的价格会自动计算
3、总价业务：只有勾选上的商品才会计算价格总额
三、编程思路分析：
1、复选框业务：首先全选复选框肯定需要添加一个点击事件，用来判断当前是否被选中，如果被选中触发将以下选项全部选中事件的方法；其次，其它复选框也得添加一个点击事件，用来判断当前状态，如果有一个没有选中，那么全选就必须为未被选中状态
2、文本输入框业务：文本框需要一个添加键盘事件，当输入文成以后，会进行价格的计算，并显示在界面上
3、总金额的计算：总金额的计算方法是要添加到复选框的业务中去；
四、具体代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> table{ width: 500px; text-align: center; font-size: 30px; } </style> </head> <body> <table border="1" cellspacing="0"> <thead> <tr>id <th >全选 <input type="checkbox" id="cAll" οnclick="checkAll()"/></th> <th>商
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
