js购物车实现全选反选删除...(附图片代码)

2024-05-23 17:10:39

要求：

1.实现全选和全部选的功能。当商品被选中时，需要计算选择的商品数量和总计

2实现数量的加一或者减一。当数量改变时，需要重新计算小计；如果该商品被选中，则需要重新计算商品数量和总计。注意：商品数量不能小于 1

3.单击“删除”按钮后，删除列表中的该条数据

css样式

html

js代码

<script>

//删除

function del(e){

e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);

}

//复选框

//获取总复选框

var box= document.getElementById("box");

//获取其他复选框

var xuan = document.getElementsByName("xuan");

function dian(){

if(box.checked){

for (var i = 0; i < xuan.length; i++) {

xuan[i].checked =true;

}

}else{

for (var i = 0; i < xuan.length; i++) {

xuan[i].checked =false;

}

}

zong();

}

//反选

var flag = false;

function fan(e){

for (var i = 0; i < xuan.length; i++) {

if(!xuan[i].checked){

flag =false;

break;

}

}

if(!flag){

box.checked =false;

}else{

box.checked =true;

}

zong();

}

//加

//获取

function jia(e){

var aa= e.nextSibling.nextSibling;

var num= aa.value;

num++;

aa.value = num;

//获取单价

var price= e.parentNode.previousSibling.previousSibling.childNodes[0].value;

//获取小计

e.parentNode.nextSibling.nextSibling.childNodes[1].value = price*num;

zong();

}

//减

function jian(e){

var aa =e.previousSibling.previousSibling;

var num = aa.value;

num--;

if(num<0){

alert("不要在减了");

num=0;

}

aa.value = num;

//获取单价

var price= e.parentNode.previousSibling.previousSibling.childNodes[0].value;

//获取小计

e.parentNode.nextSibling.nextSibling.childNodes[1].value = price*num;

zong();

}

//获取总计

var nums = document.getElementById("nums");

//获取总数量

var count = document.getElementById("count");

//获取所有单价

var prices = document.getElementsByName("price");

//获取所有数量

var shus =document.getElementsByName("shu");

function zong(){

var sum = 0;

var sumqian=0;

for (var i = 0; i < xuan.length; i++) {

if(xuan[i].checked){

sum+=Number(shus[i].value);

sumqian+=prices[i].value*shus[i].value;

}

}

console.log(sum);

console.log(sumqian);

nums.innerHTML = sum;

count.innerHTML=sumqian;

}

//失去焦点事件

for (var i = 0; i < shus.length; i++) {

shus[i].οnblur= function(){

zong();

}

}

</script>

js购物车实现全选反选删除...(附图片代码)相关推荐

uniapp手写购物车单选全选反选
uniapp手写购物车单选全选反选这里是用图片切换的方法显示没有用到 checkbox 单选选项图片判断切换全选选项图片判断切换这里是用图片切换的方法显示没有用到 checkbox ...
html网页全选效果,为什么我用js写的全选/反选/全不选页面，没有效果？
代码奉上清空买什么书? PHP HTML5 全选反选全不选 function checkall(form,status){ var elements = form.getElementByTa ...
商城项目--全选,反选 vue2.x+JQ代码（俩种实现方式）
Hello 大家好我是杨小宝!最近刚刚接手公司内一个商城项目,里面一些业务逻辑其实学习与记录一下挺好的,如果你也正好做商城类似的项目,看一下我们有相同的问题吗? 首先这个全选,反选一开始做的时候我进入 ...
[JS] checkbox 选中/全选/反选/不选
知识点: 1. jQuery: prop() 和 attr() attr('checked') 返回string类型 prop('checked') 返回Boolean类型结论:$(" ...
android 批量查找view,Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
效果图如下: recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
android 获取通讯录全选反选_Android Recyclerview实现多选,单选,全选,反选,批量删除的功能...
效果图如下: Recyclerview 实现多选,单选,全选,反选,批量删除的步骤 1.在Recyclerview布局中添加上底部的全选和反选按钮,删除按钮,和计算数量等控件 2.这里选中的控件没有用 ...
html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...
【HTML5】页面点击按钮添加一行删除一行全选反选全不选
页面点击按钮添加一行删除一行全选反选全不选页面效果图如下 html页面代码 <!DOCTYPE html> <html><head>< ...
jQuery如何动态删除TR，input按钮删除本行记录,checkbox全选反选
checkbox 全选反选 1: var i = 1; 2: function CheckAllTeacher() { 3: if (i % 2 == 1) { 4: i++; 5: $(" ...

最新文章

热门文章