在这里为大家展示一个用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>商