购物车编辑
实现了：第一件商品的加减
实现了：全选/全不选（使用prop而不是attr）
实现了：删除（遮罩层）
未实现：小计及应付款额的初始化（写死的）
计算小数乘法时，要先乘100
<html><head><meta charset="UTF-8"><title>购物车</title></head><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><style>.div1 {border: 1px solid gainsboro;width: 950px;height: 60px;}.div-checkbox,.div-goods,.div-amount,.div-unit-price,.div-price,.div-del {border: 1px solid;width: 60px;height: 20px;padding: 20px;float: left;text-align: center;}.div-price {width: 100px;}.div-goods {width: 140px;}.div-amount {width: 140px;}.div-unit-price {width: 50px;}.div-total-price {border: 1px solid gainsboro;width: 950px;height: 60px;text-align: right;}.div-submit {width: 950px;text-align: right;}div#cover {/*遮罩层*/position: absolute;top: 0;left: 0;width: 100%;height: 1000px;z-index: 100;display: none;background-color: grey;}div#prompt {/*弹窗*/border: 2px solid yellow;display: none;position: fixed;top: 100px;left: 500px;z-index: 101;width: 300px;height: 200px;}</style><script>$(function() {//全选var i = 0;$(".allPic").click(function() {i++;if (i % 2 != 0) {//此处用attr则只能选中/取消一次$(".cls-checked").prop("checked", true);} else {$(".cls-checked").prop("checked", false);}});//通过name获取某一商品的按钮$("input[name='btn1']").click(function() {//数量var _amount = parseInt($("#id-txt-amount1").val());if ($(this).val() == "+") {_amount++;} else if ($(this).val() == "-") {if (_amount == 1) {//必须买!return;}_amount--;}$("#id-txt-amount1").attr("value", _amount);// 本商品的总价var _unitPrice = $("#id-unit-price1").html();var _thisPrice = parseFloat(_unitPrice * 100 * _amount / 100).toFixed(2);$("#id-price1").html(_thisPrice);// 总价var _otherPrice = $("#id-price2").html();var _totalPrice = parseFloat(_thisPrice + _otherPrice).toFixed(2);$("#id-total-price").html(_totalPrice);});//删除一条$(".div-del a").click(function() {showPrompt(this);});});function showPrompt(obj) {$("#cover").css("display", "block");// 10毫秒内透明度降为0.5$("#cover").fadeTo(10, 0.5);$("#prompt").css("display", "block");$("#prompt a").click(function() {$("#cover").css("display", "none");$("#prompt").css("display", "none");return;});$("#prompt input").click(function() {$("#cover").css("display", "none");$("#prompt").css("display", "none");$(obj).each(function() {$(obj).parent("div").parent("div").remove();});});}</script><body><!--遮罩层--><div id="cover"></div><!--弹窗--><div id="prompt"><div style="width: 100%;height: 20px;text-align: right;background-color: gray;"><a href="#">关闭</a></div><div style="text-align: center;background-color: white;width: 300px;height: 180px;line-height: 100px;">确认删除吗？<br /><input type="button" value="确定" /></div></div><!--表头-------------------------------------------------------><div class="div1"><div class="div-checkbox"><input type="checkbox" class="allPic"><b>全选</b></input></div><div class="div-goods"><b>项目</b></div><div class="div-amount"><b>数量</b></div><div class="div-unit-price"><b>单价</b></div><div class="div-price"><b>小计</b></div><div class="div-del"></div></div><!--第一行-------------------------------------------------------><div class="div1"><div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div><div class="div-goods">A</div><div class="div-amount"><input type="button" value="-" name="btn1" /><input type="text" size="2" value="1" id="id-txt-amount1" /><input type="button" value="+" name="btn1" /></div><div class="div-unit-price">￥<span id="id-unit-price1">9.90</span></div><div class="div-price">￥<span id="id-price1">2.00</span></div><div class="div-del"><a href="#">删除</a></div></div><!--第二行（未实现加减）-------------------------------------------------------><div class="div1"><div class="div-checkbox"><input type="checkbox" class="cls-checked" /></div><div class="div-goods">B</div><div class="div-amount"><input type="button" value="-" class="btn2" /><input type="text" size="2" value="1" id="id-txt-amount2" /><input type="button" value="+" class="btn2" /></div><div class="div-unit-price">￥<span id="id-unit-price2">2.00</span></div><div class="div-price">￥<span id="id-price2">2.00</span></div><div class="div-del"><a href="#">删除</a></div></div><div class="div-total-price">应付款额： ￥<span id="id-total-price">11.90</span></div><div class="div-submit"><input type="submit" /></div></body></html>