html + css
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 500px;
margin: 50px auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
/* 按钮计算 */
.btn .btn_prev,
.btn .btn_val,
.btn .btn_next {
width: 24px;
height: 24px;
text-align: center;
/* margin-right: 5px;/ */
}
.btn .btn_val {
width: 35px;
}
#money,
#number {
color: red;
font-size: 22px;
}
</style>
<body>
<div class="wrap" id="btn_father">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
<th>数量</th>
</tr>
</thead>
<tbody id="btn_body">
<tr>
<td>
<input class="j_tb" type="checkbox" />
</td>
<td>p1</td>
<td class="price">70</td>
<td class="btn">
<!-- btn_ptev = 1 ?document.querySelector('.btn_prev').disabled : ''=true -->
<button class="btn_prev" onclick="">-</button>
<input class="btn_val" type="text" value="1">
<button class="btn_next">+</button>
</td>
</tr>
<tr>
<td>
<input class="j_tb" type="checkbox" />
</td>
<td>p2</td>
<td class="price">80</td>
<td class="btn">
<button class="btn_prev">-</button>
<input class="btn_val" type="text" value="1">
<button class="btn_next">+</button>
</td>
</tr>
<tr>
<td>
<input class="j_tb" type="checkbox" />
</td>
<td>p3</td>
<td class="price">100</td>
<td class="btn">
<button class="btn_prev">-</button>
<input class="btn_val" type="text" value="1">
<button class="btn_next">+</button>
</td>
</tr>
<tr>
<td colspan="4" id="remove" style="text-align: center;font-weight: 900;">删除选中项</td>
</tr>
<tr>
<td colspan="4" style="text-align: center;font-weight: 900;">已选择商品：<span id="number">0</span>件
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center;font-weight: 900;">总价：￥<span id="money">0</span>元</td>
</tr>
</tbody>
</table>
</div>
</body>
js:::
<script>
//1.按钮全选：
let j_cbAll = document.querySelector('#j_cbAll') //全选按钮
let j_tbAll = document.querySelectorAll('.j_tb') //单个按钮
// 1.全选: 方法1：遍历子元素判断状态，利用this.checkbox：
// j_cbAll.onchange = function () {
// for (let i = 0; i < j_tbAll.length; i++) {
// /*
// 1. this.checked可以获取当前复选框的状态返回值为true或false
// 2. 让每一个儿子的checked的值都等于当前全选按钮的checked的值。实现全选了3. 但是儿子再取消，就还是全选
// 4. 解决方案：所以要反选判断
// */
// j_tbAll[i].checked = this.checked
// }
// }
// 1.按钮全选：方法2:遍历子元素判断状态，利用checkbox：
j_cbAll.onchange = function () {
for (var i = 0; i < j_tbAll.length; i++) {
if (j_cbAll.checked == true) {
j_tbAll[i].checked = true;
// 调用已选商品总件数，总价钱
cart_number()
cart_money()
} else {
j_tbAll[i].checked = false;
// 取消全选全归0，已选商品总件数，总价钱归0
number.innerText = 0
money.innerText = 0
}
}
}
// 2.按钮反选：tbody里面的复选框的事件：下面全选中了则全选按钮也要为选中状态，若有至少一个未选中则全选按钮也为未选中状态，注意：tbody里面的复选框每一次被点击都需要做判断，看是否所有的复选框都被选中了
for (let i = 0; i < j_tbAll.length; i++) {
j_tbAll[i].onchange = function () {
// flag 用于控制全选按钮是否选中
let flag = true;
// 每次点击下面的复选框都要循环检查4个复选框是否全被选中了
for (let j = 0; j < j_tbAll.length; j++) {
// console.log(j_tbAll[i].checked);
if (j_tbAll[j].checked == false) { //有一个按钮没有被选中就执行内部代码修改flag的值为false
flag = false;
break; // 退出里层for循环，提高执行效率（有一个没有被选中，剩下的就无需再判断）
}
}
j_cbAll.checked = flag; // 循环结束后将flag的值给全选按钮
}
}
// 3.删除所选项
remove.onclick = function () {
// 遍历按钮，判断是否选中，自杀清除tr
for (let j = 0; j < j_tbAll.length; j++) {
console.log(j)
if (j_tbAll[j].checked == true) {
j_tbAll[j].parentNode.parentNode.remove()
// 删除的归0，已选择的商品总件数，总价钱归0
number.innerText = 0
money.innerText = 0
// 删除后，全选按钮为未选中状态
j_cbAll.checked = false
}
}
}
// 4.实现点击按钮 ++增 --减，input填东西超出触发：失焦事件
let btn_next = document.querySelectorAll('.btn_next') //++ 数组
let btns = document.querySelectorAll('.btn_val') //input 数组
let btn_prev = document.querySelectorAll('.btn_prev') //-- 数组
let price = document.querySelectorAll('.price') //价格 数组
// console.log(btn_next);
/*4 实现思路: ：：
1.一行就是一个商品。我们可以在++，--，input上带着相同的类名：命名好，先获取数组元素
2.遍历相同类名，得到索引，然后可以把i索引赋值给，同一行（同层次）的类名上（记得获取所有的元素类名）
3.然后添加点击事件触发：++，--，失焦blur事件
4.获取input值，input值赋值给一个新的变量进行++ --，然后再赋值给input的value
5.后续需要判断范围，如果不需要判断，完全可以直接获取值，++ --
*/
for (let i = 0; i < btn_next.length; i++) {
// ++按钮
// btn_next[i].index = i
btn_next[i].addEventListener('click', function () {
// console.log(btns[i]);
// 点击后-0字符型，转换成数值型，然后自加1，进行判断
let amount = btns[i].value - 0
amount++
//
if (amount <= 10) {
btns[i].value = amount
// 调用已选商品总件数，总价钱
cart_number()
cart_money()
// console.log(btns[i].value);
} else {
alert('最多买10件')
btn_next[i].checked = true
return
}
})
// --按钮
// btn_prev[i].index = i
btn_prev[i].addEventListener('click', function () {
let amount = btns[i].value - 0
amount--
if (amount < 1) {
amount = 1
btn_prev[i].checked = false
} else {
btns[i].value = amount
// 调用已选商品总件数，总价钱
cart_number()
cart_money()
// console.log(btns[i].value);
}
})
// input: 失焦blur
btns[i].addEventListener('blur', function () {
if (btns[i].value < 0 || btns[i].value > 10) {
alert('请输入 1~10')
btns[i].value = 1
}else{
// 调用已选商品总件数，总价钱
cart_number()
cart_money()
}
})
// 5.已选择商品总件数（封装） number总数 是(id)
j_tbAll[i].addEventListener('change', cart_number)
function cart_number() {
let cartNumber = 0 //总件数
// 遍历所有单按钮，累加true状态的按钮
for (let j = 0; j < j_tbAll.length; j++) {
if (j_tbAll[j].checked == true) {
cartNumber += btns[j].value - 0
// console.log(cartNumber);
}
}
number.innerText = cartNumber
}
// 6.总价（封装）：money总价 是(id)
j_tbAll[i].addEventListener('change', cart_money)
function cart_money() {
let total = 0 //总价
// 遍历所有单按钮，累加true状态的按钮
for (let j = 0; j < j_tbAll.length; j++) {
if (j_tbAll[j].checked == true) {
// 一行价钱
total += price[j].innerText * btns[j].value
// console.log(total);
}
}
money.innerText = total
}
}
</script>
这段代码展示了如何使用HTML和CSS创建一个商品列表，每个商品包括名称、价格和数量调节按钮。JavaScript用于处理全选、反选功能，以及商品数量的增减和总价的实时计算。当用户选择商品并调整数量时，已选商品总数和总价会动态更新。
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
