使用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
我先新增几个商品，然后给大家看下效果图
全选
删除
到这里就结束了
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
