实现的功能：
1.点击全选按钮是其他按钮也选中，并计算选中所有的商品价格
2.取消全选按钮，价格重新计算
3.单点每个商品的按钮并计算价格
小知识点（有空时小知识点要多回顾一下哦，加深记忆）：
1.关于设置表格样式的知识点
cellspacing 单元格与单元格之间的距离cellpadding 内容与单元格之间的距离valign 垂直方向对齐方式 top 顶对齐middle 垂直居中bottom 底对齐bordercolor 边框颜色bgcolor 背景颜色rules 规定内侧边框哪部分可见none 内侧边框不可见rows 行之间的线条可见cols 列之间的线条可见all 行与列之间的线条均可见单元格合并水平合并单元格 colspan="合并单元格个数"垂直合并单元格 rowspan="合并单元格个数"
2.JQ相关知识点
用到的JQ事件：.chage() 当元素发生改变时
用到的JQ属性：.prop() 获取/设置元素的属性值
.text()获取元素的内容
用到的JQ筛选：.parent() 查找父元素的元素集合
.siblings()筛选兄弟元素的元素集合
整体代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 引入jq --><script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script></head><body><table border="1" cellspacing="0" width="250px"><tr><th><input type="checkbox" class="all" /></th><th>商品</th><th>价钱</th></tr><tr><td><input type="checkbox" class="inp2" /></td><td>苹果</td><td class="num">20</td></tr><tr><td><input type="checkbox" class="inp2" /></td><td>榴莲</td><td class="num">100</td></tr><tr><td><input type="checkbox" class="inp2" /></td><td>葡萄</td><td class="num">20</td></tr><tr><td><input type="checkbox" class="inp2" /></td><td>橘子</td><td class="num">15</td></tr><tr><td colspan="3">总价：<span class="sum"></span></td></tr></table></body><script type="text/javascript">$(function() {// 当全选按钮发生改变事件$(".all").change(function() {// 获取这个按钮的选中属性var val = $(this).prop("checked");// 把获取的这个属性设置给子按钮，这样就实现点击同时取消，同时选中$(".inp2").prop("checked", val)// 设置一个变量接收选中按钮的价格let total = $(".inp2:checked").parent().siblings(".num");// 设置初始价格let price = 0;// 遍历选中的按钮for (let i = 0; i < total.length; i++) {// 价格相加 *1是为了把字符串转化为数字price += $(total[i]).text() * 1;}// 把价格之和显示到总价一行$(".sum").text(price);})// 当子按钮发生改变事件$(".inp2").change(function() {// 获取子按钮的总共长度var len1 = $(".inp2").length// 获取子按钮为选中状态的长度var len2 = $(".inp2:checked").length// 如果总长度等于选中长度if (len1 === len2) {// 全选按钮就设置为选中$(".all").prop("checked", true);} else {// 否则不选中$(".all").prop("checked", false);}// 设置一个变量接收选中按钮的价格let total = $(".inp2:checked").parent().siblings(".num");// 设置初始价格let price = 0;// 遍历选中的按钮for (let i = 0; i < total.length; i++) {// 价格相加 *1是为了把字符串转化为数字price += $(total[i]).text() * 1;}// 把价格之和显示到总价一行$(".sum").text(price);})})</script></html>
ps：
如有建议和错误之处望老师们指证，一定会积极改正，有什么想交流的可以评论一起讨论哦。一起学习一起进步。
书山有路勤为径，学海无涯苦作舟
（如果你想在无边无际的知识海洋里畅游，耐心、尽力、刻苦的学习态度将是一艘前行的船，能够载你驶向成功的彼岸。在读书、学习的道路上，没有捷径可走，也没有顺风船可驶，如果你想要在广博的书山、学海中更多汲取更广的知识，“勤奋”和“刻苦”是两个必不可少的，也是最佳的条件）
