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>