js实现多选删除
使⽤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.ve(); //删除上上⼀级的元素
}
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 ElementsByName("cars");
var ElementById("ca");
var ElementsByClassName("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 ElementsByName("cars");
通过document的getElementsByName()⽅法，来获取所有name值为cars的元素，也就是所有商品前⾯的复选框
var ElementById("ca"); //获取全选按钮的对象
var ElementsByClassName("ss");//获取全选按钮后⾯span标签⽂本的对象
var isd=alc.checked; //获取全选按钮当前的状态(选中/没选中)
获取完状态以后，就通过循环来给下⾯商品的复选框添加状态
for(var i=0;i<check.length;i++){
check[i].checked=isd;
}
}
运⾏后的结果如下：
点击全选后
接下来就是多选删除了
代码如下：
function deleteAI() {
var cn = ElementsByName("cars");
for (var i = 0; i < cn.length;i++) {
if (cn[i].checked){
deleteTr(cn[i]);
i = -1;
}
}
}
var cn = ElementsByName("cars"); //⾸先获取所有得商品对象
js购物车结算代码for (var i = 0; i < cn.length;i++) {
if (cn[i].checked){
deleteTr(cn[i]);
i = -1;
}
}
}
然后通过for循环再进⾏判断，如果是选中的就调⽤之前写的删除⽅法来删除该商品，并把循环变量改成-1我先新增⼏个商品，然后给⼤家看下效果图
全选
删除
到这⾥就结束了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。