标签：5.4 checkTds value js let parentNode checked obj 购物车
效果图：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<fieldset id="">
<legend>购物车</legend>
商品名称：<input type="text" name="" id="goodsName" value="" />
商品价格：<input type="text" name="" id="goodsPrice" value="" />
商品数量：<input type="text" name="" id="goodsNum" value="" /><br>
<input type="button" name="" id="" value="添加" onclick="addgoods()" />
<table border="" cellspacing="" cellpadding="">
<tr>
<th>选择<input type="checkbox" name="" id="allCheck" value="" onclick="allCheckbtn()" /></th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
<th>操作</th>
</tr>
<tbody id="goodsList">
</tbody>
</table>
<input type="button" name="" id="" value="删除选中" onclick="delAll()" />
<span id="totalprice">
</span>
</fieldset>
<script type="text/javascript">
function add() {
let str = "";
str += "<td><input type='checkbox' class='checkTd' οnclick='checkone()'></td>";
str += "<td class='goodsNameTr'>" + goodsName.value + "</td><td>" + goodsPrice.value + "</td>"
str += "<td><input type='button' value='+' οnclick='addbtn(this)'><input type='number' value='" + goodsNum
.value + "'><input type='button' value='-' οnclick='lowerbtn(this)'></td>"
str += "<td>" + Number(goodsPrice.value) * +Number(goodsNum.value) + "</td>"
str += "<td><input type='button' value='删除' οnclick='delbtn(this)'></td>";
let trNew = document.createElement("tr");
trNew.innerHTML += str;
goodsList.appendChild(trNew);
totalpricebtn();
}
//判断添加
function addgoods() {
let goodsNameTrs = document.getElementsByClassName("goodsNameTr");
if (goodsNameTrs.length == 0) {
add();
} else {
let status = false;
for (var i = 0; i < goodsNameTrs.length; i++) {
if (goodsNameTrs[i].innerText == goodsName.value) {
status = true;
goodsNameTrs[i].parentNode.children[3].children[1].value = Number(goodsNameTrs[i].parentNode
.children[3].children[1].value) + Number(goodsNum.value);
goodsNameTrs[i].parentNode.children[4].innerHTML = goodsNameTrs[i].parentNode.children[2].innerText *
goodsNameTrs[i].parentNode.children[3].children[1].value
}
}
if (!status) {
add();
}
}
}
//添加数量
function addbtn(obj) {
obj.nextElementSibling.value++;
obj.parentNode.nextElementSibling.innerText = obj.parentNode.previousElementSibling.innerText * obj
.nextElementSibling.value;
totalpricebtn();
}
//减少数量
function lowerbtn(obj) {
obj.previousElementSibling.value--;
obj.parentNode.nextElementSibling.innerText = obj.parentNode.previousElementSibling.innerText * obj
.previousElementSibling.value;
totalpricebtn();
}
//删除
function delbtn(obj) {
obj.parentNode.parentNode.remove();
totalpricebtn();
}
//全选择
function allCheckbtn() {
let checkTds = document.getElementsByClassName("checkTd");
let status = allCheck.checked;
for (var i = 0; i < checkTds.length; i++) {
if (allCheck.checked) {
checkTds[i].checked = status;
} else {
checkTds[i].checked = status;
}
}
totalpricebtn();
}
//反选
function checkone() {
let checkTds = document.getElementsByClassName("checkTd");
let status = true;
for (var i = 0; i < checkTds.length; i++) {
if(!checkTds[i].checked){
status = false;
break;
}
}
if(status){
allCheck.checked = true;
}else{
allCheck.checked = false;
}
totalpricebtn();
}
//删除选中
function delAll(){
let checkTds = document.getElementsByClassName("checkTd");
for (var i = checkTds.length-1; i >= 0; i--) {
if(checkTds[i].checked){
checkTds[i].parentNode.parentNode.remove();
}
}
totalpricebtn();
}
//总价
function totalpricebtn(){
let checkTds = document.getElementsByClassName("checkTd");
let num = 0;
for (var i = 0; i < checkTds.length; i++) {
if(checkTds[i].checked){
num += Number(checkTds[i].parentNode.parentNode.children[4].innerText);
}
}
totalprice.innerText = "总价格"+num+"元";
}
</script>
</body>
</html>
标签：5.4,checkTds,value,js,let,parentNode,checked,obj,购物车 来源： https://blog.csdn.net/wang121213145/article/details/122094575
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。