js实现多选删除

最新推荐文章于 2024-03-01 09:01:11 发布

动心。

最新推荐文章于 2024-03-01 09:01:11 发布

阅读量5.9k

点赞数 9

分类专栏：个人文章标签：新手

本文链接：https://blog.csdn.net/qq_43494108/article/details/93875944

版权

个人专栏收录该内容

5 篇文章 2 订阅

订阅专栏

使用js实现多选删除

谈谈多选删除

在我们实际生活中多选删除处处都有，比如在购物网站上已经加入购物车的商品，准备结算的时候发现有一部分的商品用不上，于是就把它们从购物车里移出，但是在移出之前要把要移出的商品前面的勾打上，然后再点击移出购物车才能把这些商品移除，接下来我就利用H5的checkbox和button标签再配合js来给大家演示下这个操作。
首先我们来看页面代码：

<body>
    <table>
        <a href="javascript:void(0)" onclick="insertTd()">新增商品</a>
        <tr>
            <td><input type="checkbox"  id="ca" onclick="pitchOn()" /><span class="ss">全选</span></td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td >商品数量</td>
            <td >小计</td>
            <td>操作</td>
        </tr>
        <tr>
            <td><input type="checkbox"name="cars" onclick="calculatAll()"/></td>
            <td>毛衣</td>
            <td>20</td>
            <td class="num">2</td>
            <td class="salary">40</td>
            <td><input type="button" onclick="deleteTr(this)" value="删除"/></td>
        </tr>
        <tr>
            <td><input type="checkbox"name="cars" onclick="calculatAll()"/></td>
            <td>衬衫</td>
            <td>120</td>
            <td class="num">1</td>
            <td class="salary">120</td>
            <td><input type="button" onclick="deleteTr(this)" value="删除"/></td>
        </tr>
    </table>
<p><input type="button" value="批量删除" onclick="deleteAI()"/></p>
</body>

运行效果
在这里插入图片描述
在讲多选删除之前先讲单个删除，先看代码

<td><input type="button" onclick="deleteTr(this)" value="删除"/></td>

onclick:点击事件
this:当前对象

function deleteTr(obj){		
    obj.parentNode.parentNode.remove();	//删除上上一级的元素	
}

obj:代表我们点击删除按钮时获得该按钮的对象
parentNode:代表obj的父节点
remove():删除方法

首先我们从效果图可以看到删除按钮被一个单元格包着，而单元格都在一行里

所以上面第二段代码里的obj.parentNode.parentNode就是获取行对象然后再通过**remove()**方法来删除。
接下来给大家看看运行效果

点击删除按钮以后
在这里插入图片描述
接下来我们来写多选，不然一个一个删太慢了
多选：当我们点击全选按钮的时候下面所有的商品都要打勾
代码如下：
html标签代码：

<td><input type="checkbox"  id="ca" onclick="pitchOn()" /><span class="ss">全选</span></td>

<td><input type="checkbox"name="cars" onclick="calculatAll()"/></td>

注意：只有表单才能用name属性，其他标签用name属性都无效

js代码：

function pitchOn(){
    var check=document.getElementsByName("cars");
    var alc=document.getElementById("ca");
    var txt=document.getElementsByClassName("ss");
    var isd = alc.checked;
    if(isd){
        txt[0].innerText="取消全选";
    }else{
        txt[0].innerText="全选";
    }
    for(var i=0;i<check.length;i++){
        check[i].checked=isd;
    }
}

var check=document.getElementsByName("cars");

通过document的getElementsByName()方法，来获取所有name值为cars的元素，也就是所有商品前面的复选框

var alc=document.getElementById("ca");	//获取全选按钮的对象
var txt=document.getElementsByClassName("ss");//获取全选按钮后面span标签文本的对象
var isd=alc.checked;	//获取全选按钮当前的状态(选中/没选中)

获取完状态以后，就通过循环来给下面商品的复选框添加状态

for(var i=0;i<check.length;i++){
        check[i].checked=isd;
    }
}

运行后的结果如下：
在这里插入图片描述
点击全选后

在这里插入图片描述
接下来就是多选删除了
代码如下：

function deleteAI() {
    var cn = document.getElementsByName("cars");

    for (var i = 0; i < cn.length;i++) {
        if (cn[i].checked){
            deleteTr(cn[i]);
            i = -1;
        }
    }
}

var cn = document.getElementsByName("cars");	//首先获取所有得商品对象

for (var i = 0; i < cn.length;i++) {
        if (cn[i].checked){
            deleteTr(cn[i]);
            i = -1;
        }
    }
}

然后通过for循环再进行判断，如果是选中的就调用之前写的删除方法来删除该商品，并把循环变量改成-1

我先新增几个商品，然后给大家看下效果图

在这里插入图片描述
全选

在这里插入图片描述
删除

到这里就结束了

动心。

关注

9
点赞
踩
29

收藏

觉得还不错? 一键收藏
6
评论
js实现多选删除

使用js实现多选删除谈谈多选删除在我们实际生活中多选删除处处都有，比如在购物网站上已经加入购物车的商品，准备结算的时候发现有一部分的商品用不上，于是就把它们从购物车里移出，但是在移出之前要把要移出的商品前面的勾打上，然后再点击移出购物车才能把这些商品移除，接下来我就利用H5的checkbox和button标签再配合js来给大家演示下这个操作。首先我们来看页面代码：<body>...
复制链接

扫一扫