这篇文章将为大家详细讲解有关JavaScript实现购物车基本功能的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
JavaScript购物车最基本的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<!DOCTYPE html>
计算
安全
数据库
网络和加速
企业服务
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
}
th{
width: 80px;
height: 30px;
}
td{
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<table border="" cellspacing="" cellpadding="">
<thead>
<th ><input type="checkbox" id="checkedAll"/>选择</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>黄焖鸡米饭1</td>
<td>10</td>
<td>
<span class="jian">-</span>
<input type="text" value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span >10</span>
</td>
<td>
<a >删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>黄焖鸡米饭2</td>
<td>20</td>
<td>
<span class="jian">-</span>
<input type="text" value="1" readonly="readonly"/>
<span class="jia">+</span>
</td>
<td>
<span >20</span>
</td>
<td>
<a >删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
window.onload=function(){
var checkedAll=document.getElementById("checkedAll")
var tb=document.getElementById("tb")
var oinput=tb.getElementsByTagName('input')
var jian=document.getElementsByClassName('jian')
var jia=document.getElementsByClassName('jia')
var shanchu=tb.getElementsByTagName('a')
console.log(shanchu)
//全选
checkedAll.onclick=function(){
for(var i=0;i<oinput.length;i++){
oinput[i].checked=this.checked
}
}
//当下级有一个没有选中时那么全选按钮则为false状态
for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
var qx=true
for(var i=0;i<oinput.length;i++){
if(oinput[i].checked==false){
qx=false
}
}
checkedAll.checked=qx
}
}
checkedAll.onclick=function(){
for(var i=0;i<oinput.length;i++){
oinput[i].checked=this.checked
}
}
for(var i=0;i<oinput.length;i++){
oinput[i].onclick=function(){
var qx = true;
for(i=0;i<oinput.length;i++){
if(oinput[i].checked==false){
qx=false
}
}
checkedAll.checked=qx
}
}
//加
for(var i=0;i<jia.length;i++){
jia[i].onclick=function(){
//previousSibling上一个兄弟节点
var val = parseInt(this.previousSibling.previousSibling.value);
this.previousSibling.previousSibling.value = val + 1;
jisuan(this)
}
}
//减
for(var i=0;i<jian.length;i++){
jian[i].onclick=function(){
//nextSibling下一个兄弟节点
var val = parseInt(this.nextSibling.nextSibling.value);
if(val > 1) {
this.nextSibling.nextSibling.value = val - 1;
}
jisuan(this)
}
}
//操作删除
for(var i=0;i<shanchu.length;i++){
shanchu[i].onclick=function(){
var conf = confirm('确定删除这件商品吗？');
//parentNode父节点
console.log(this.parentNode.parentNode)
if(conf) {
//removeChild 删除节点
tb.removeChild(this.parentNode.parentNode);
}
}
}
//总价
function jisuan(t){
var tr=t.parentNode.parentNode
var result=document.getElementById("result")
var td=tr.getElementsByTagName('td')
td[4].getElementsByTagName('span')[0].innerHTML = parseInt(td[2].innerHTML)*parseInt(t.parentNode.getElementsByTagName('input')[0].value)
}
}
</script>
</html>关于“JavaScript实现购物车基本功能的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
