<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#f {
font-size: 50px;
font-family: 幼圆;
}
#fater {
width: 100%;
height: 100%;
border: 2px solid black;
}
#btn {
width: 50px;
height: 30px;
opacity: 0.5;
background-color: palegoldenrod;
}
#btn:hover {
background-color: burlywood;
opacity: 1;
}
.fonts {
line-height: 200px;
font-size: 20px;
float: right;
font-family: 幼圆;
}
.fontss {
line-height: 200px;
font-size: 30px;
text-align: center;
font-family: 幼圆;
}
.trs:hover {
background-color: palegoldenrod;
}
.trs {
position: ;
}
.delete-btn {
height: 100px;
width: 90px;
opacity: 0.6;
}
.a {
float: left;
text-align: center;
line-height: 20px;
}
#wind {
width: 100px;
height: 50px;
}
#last-delete {
width: 60px;
height: 40px;
}
#num {
color: red;
}
#main-num {
color: red;
}
.delete-btn:hover {
background-color: #DEB887;
}
/**/
#add {
width: 20px;
height: 20px;
position: absolute;
left: 40px;
top: 0px;
}
#minus {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
}
#btn-div {
width: 20px;
height: 19px;
border: 0.1px solid black;
position: absolute;
left: 20px;
}
#father1 {
width: 59px;
height: 20px;
border: 0.1px solid black;
position: absolute;
left: 1120px;
}
.td {
position: relative;
}
/*second-senior btn*/
#add2 {
width: 20px;
height: 20px;
position: absolute;
left: 40px;
top: 0px;
}
#minus2 {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
}
#btn-div2 {
width: 20px;
height: 19px;
border: 0.1px solid black;
position: absolute;
left: 20px;
}
#father2 {
width: 59px;
height: 20px;
border: 0.1px solid black;
position: absolute;
left: 1120px;
}
/*thried-senior btn*/
#add3 {
width: 20px;
height: 20px;
position: absolute;
left: 40px;
top: 0px;
}
#minus3 {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
}
#btn-div3 {
width: 20px;
height: 19px;
border: 0.1px solid black;
position: absolute;
left: 20px;
}
#father3 {
width: 59px;
height: 20px;
border: 0.1px solid black;
position: absolute;
left: 1120px;
}
/*fourth-senior btn*/
#add4 {
width: 20px;
height: 20px;
position: absolute;
left: 40px;
top: 0px;
}
#minus4 {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
}
#btn-div4 {
width: 20px;
height: 19px;
border: 0.1px solid black;
position: absolute;
left: 20px;
}
#father4 {
width: 59px;
height: 20px;
border: 0.1px solid black;
position: absolute;
left: 1120px;
}
.foodsbtn {}
.check-all {}
</style>
</head>
<body bgcolor="beige">
<button id="btn">返回</button>
<div id="fater">
<table border="1">
<tr>
<th><input type="checkbox" id="ch-all">全选</th>
<th width="600px" height="30px">商品</th>
<th width="350px" height="30px">单价</th>
<th width="250px" height="30px">数量</th>
<th width="100px" height="30px">小计</th>
<th width="100px" height="30px">操作</th>
<tbody id="trs">
<tr class="trs">
<td><input type="checkbox" id="hh-all" class="foodsbtn"></td>
<td width="600px" height="260px" valign="center "><img src="img/伍六七.png" width="400px" height=100%>
<p class="fonts">特价伍六七</p>
</td>
<td width="350px" height="260px">
<p class="fontss">99</p>
</td>
<td width="250px" height="260px">
<div id="father1">
<button id="minus">
-
</button>
<div id="btn-div">
<center></center>
</div>
<button id="add">
+
</button>
</div>
</td>
<td width="100px" height="260px">
<p class="fontss">0</p>
</td>
<td width="100px" height="260px">
<p class="fontss"><button class="delete-btn">删除</button></p>
</td>
</tr>
<tr class="trs">
<td><input type="checkbox" id="hh-all" class="foodsbtn"></td>
<td width="600px" height="260px"><img src="img/姜主任.png" width="400px" height=100%>
<p class="fonts">新品姜主任</p>
</td>
<td width="350px" height="260px">
<p class="fontss">599</p>
</td>
<td width="250px" height="260px">
<div id="father2">
<button id="minus2">
-
</button>
<div id="btn-div2">
<center></center>
</div>
<button id="add2">
+
</button>
</div>
</td>
<td width="100px" height="260px">
<p class="fontss">0</p>
</td>
<td width="100px" height="260px">
<p class="fontss"><button class="delete-btn">删除</button></p>
</td>
</tr>
<tr class="trs">
<td><input type="checkbox" id="hh-all" class="foodsbtn"></td>
<td width="600px" height="260px"><img src="img/梅花十三1.png" width="400px" height=100%>
<p class="fonts">特价梅花十三</p>
</td>
<td width="350px" height="260px">
<p class="fontss">199</p>
</td>
<td width="250px" height="260px">
<div id="father3">
<button id="minus3">
-
</button>
<div id="btn-div3">
<center></center>
</div>
<button id="add3">
+
</button>
</div>
</td>
<td width="100px" height="260px">
<p class="fontss">0</p>
</td>
<td width="100px" height="260px">
<p class="fontss"><button class="delete-btn">删除</button></p>
</td>
</tr>
<tr class="trs">
<td><input type="checkbox" id="hh-all" class="foodsbtn"></td>
<td width="600px" height="260px"><img src="img/梅花十三2.png" width="400px" height=100%>
<p class="fonts">正品梅花十三</p>
</td>
<td width="350px" height="260px">
<p class="fontss">699</p>
</td>
<td width="250px" height="260px">
<div id="father4">
<button id="minus4">
-
</button>
<div id="btn-div4">
<center></center>
</div>
<button id="add4">
+
</button>
</div>
</td>
<td width="100px" height="260px">
<p class="fontss">0</p>
</td>
<td width="100px" height="260px">
<p class="fontss"><button class="delete-btn">删除</button></p>
</td>
</tr>
</tbody>
<table>
<tr>
<th width="10px" height="50px">
<input type="checkbox" class="check-all" id="ccc">
</th>
<th width="50x" height="50px">
<p id="a">全选</p>
</th>
<th width="1000px" height="20px">
<button id="last-delete">删除</button>
</th>
<th width="200px" height="50px">
已选商品<span id="num">0</span>件<button id="other"></button>
</th>
<th width="100px" height="50px">
合计:<span id="main-num">0</span>元
</th>
<th width="100px" height="50px">
<button id="wind">结算</button>
</th>
</tr>
</table>
</table>
</div>
<script type="text/javascript">
//全选
var chall = document.getElementById('ch-all')
var trs = document.getElementById('trs')
var inputs = trs.getElementsByTagName("input");
/* var foodsbtn = document.getElementsByClassName("foodsbtn");
var checkall = document.getElementsByClassName("check-all"); */
console.log(chall)
console.log(trs)
console.log(inputs)
chall.onclick = function() {
//如果是checkbox，设置状态与父状态一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === "checkbox") {
input.checked = this.checked;
}
}
}
//全选问题：当子的checkbox全部被选中，那父的checkbox也要被选中。如果有一个子的checkbox没有被选中，那么父的checkbox也不被选中
//基本思路，每当点击了一个子的checkbox时，都要判断是否所有的checkbox都被选中了
//遍历所有的checkbox注册点击事件
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type != "checkbox") {
continue;
}
//判断是不是所有的checkbox都被选中，给子checkbox注册点击事件
input.onclick = function() {
checkAllCheckBox();
}
}
function checkAllCheckBox() {
//假设所有的子的checkbox都被选中
var isAllChecked = true;
//判断是不是所有的子的checkbox都被选中，所以又要循环找到所有的checkbox进行判断
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
if (input.type != "checkbox") {
continue;
}
//判断当前的checkbox是否都被选中
if (input.checked == false) {
isAllChecked = false;
}
}
//设置父的checkbox的状态
chall.checked = isAllChecked;
}
//反选
//给反选按钮注册点击事件
var ccc = document.getElementById("ccc");
console.log(ccc)
ccc.onclick = function() {
//找到所有的子的checkbox，让其反选
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type != 'checkbox') {
continue;
}
//反选
//子的checkbox
input.checked = !input.checked;
//反选完之后要判断：父的checkbox
checkAllCheckBox();
}
}
/* checkall.onclick = function() {
if (checkall.checked == true) {
for (var i = 0; i < foodsbtn.length; i++) {
foodsbtn[i].checked = true;
}
} else {
for (var i = 0; i < foodsbtn.length; i++) {
foodsbtn[i].checked = false;
}
}
} */
/* checkall.addEventListener("click", function() {
if (checkall.checked == true) {
for (var i = 0; i < foodsbtn.length; i++) {
foodsbtn[i].checked = true;
}
} else {
for (var i = 0; i < foodsbtn.length; i++) {
foodsbtn[i].checked = false;
}
}
}); */
//qqqq按钮
//first
var minus = document.getElementById("minus");
var add = document.getElementById("add");
var div = document.getElementById("btn-div");
var index = 0;
add.addEventListener("click", function() {
index++;
document.getElementById("btn-div").innerHTML = index;
});
minus.addEventListener("click", function() {
if (index < 1) {
index = 0;
} else {
index--;
}
document.getElementById("btn-div").innerHTML = index;
})
//second
var minus2 = document.getElementById("minus2");
var add2 = document.getElementById("add2");
var div2 = document.getElementById("btn-div2");
var index2 = 0;
add2.addEventListener("click", function() {
index2++;
document.getElementById("btn-div2").innerHTML = index2;
});
minus2.addEventListener("click", function() {
if (index2 < 1) {
index2 = 0;
} else {
index2--;
}
document.getElementById("btn-div2").innerHTML = index2;
})
//thired
var minus3 = document.getElementById("minus3");
var add3 = document.getElementById("add3");
var div3 = document.getElementById("btn-div3");
var index3 = 0;
add3.addEventListener("click", function() {
index3++;
document.getElementById("btn-div3").innerHTML = index3;
});
minus3.addEventListener("click", function() {
if (index3 < 1) {
index3 = 0;
} else {
index3--;
}
document.getElementById("btn-div3").innerHTML = index3;
})
//fourth
var minus4 = document.getElementById("minus4");
var add4 = document.getElementById("add4");
var div4 = document.getElementById("btn-div4");
var index4 = 0;
add4.addEventListener("click", function() {
index4++;
document.getElementById("btn-div4").innerHTML = index4;
});
minus4.addEventListener("click", function() {
if (index4 < 1) {
index4 = 0;
} else {
index4--;
}
document.getElementById("btn-div4").innerHTML = index4;
})
</script>
</body>
</html>
浙公网安备 33010602011771号