Javascript实现checkbox全选和删除所选的操作

最新推荐文章于 2022-09-29 13:08:37 发布

weixin_34268753

最新推荐文章于 2022-09-29 13:08:37 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript python ViewUI

原文链接：https://my.oschina.net/u/3807502/blog/1799058

本文介绍了一种在网页表格中实现全选及删除所选项功能的方法，包括使用HTML、CSS和JavaScript来创建表格样式、添加交互功能。文章详细讲解了如何通过按钮触发全选或取消全选所有项，以及如何实现删除已选中的表格行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

我们平常在浏览网页时，经常会看到全选和删除全选的操作，具体内容如下，仅供大家参考

实现全选思路：

1、建立表格，表头设置全选的按钮，并为它添加鼠标点击事件

<input type="checkbox" id="chkstu" onclick="myfunc(this)">

2、设计表格的CSS样式属性（宽、高、居中、边框、特殊背景颜色），为了使表格更加美观

table{
            margin: 0 auto;
            border-collapse: collapse;
            border:1px solid black;
     }
.special{
            background-color: #cdbbdb;
        }

3、通过名字获取元素getElementsByName

4、利用for循环checkbox

5、再次点击全选按钮则会取消全选

实现删除所选（整行）的思路：

1、在表格外添加一个按钮，给它一个value属性，并为它添加鼠标点击事件

<caption> 元素定义了一个表格标题。以下代码要在caption标签内写，以达到表格标题居中的目的

<input type="button" value="删除所选" onclick='delnode()' id="btndel">

2、通过名字获取元素getElementsByName

3、利用for循环checkbox

4、注意：删除所选必须从下往上依次删除，因为如果从上往下删除的话，循环条件会发生改变

5、if判断是否被选中，如果选中的话拿出它父节点的父节点，也就是tr，再拿出tr的父节点，也就是tbody,利用removeChild() 方法指定元素的某个指定的子节点，拿出tbody的子节点tr并移除

if(mychk.checked==true){
                    mytr=mychk.parentNode.parentNode;
                    pnode=mytr.parentNode;
                    pnode.removeChild(mytr);
                }

总代码如下：

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	    <style type="text/css">
        table{
            margin: 0 auto;
            border-collapse: collapse;
            border:1px solid black;
        }
        .special{
            background-color: #cdbbdb;
        }
        </style>
        <script type="text/javascript">
        //单项选择
        window.onload=function(){
            //拿出a标签
            var dellist=document.getElementsByTagName('a');
            for(var i=0;i<dellist.length;i++){
                var mydel=dellist[i];
                mydel.onclick=function(){
                    //confirm弹出判断是否要删除
                    if(confirm('你确认要删除吗?')){
                    childnode=this.parentNode.parentNode;
                    pnode=childnode.parentNode;
                    pnode.removeChild(childnode);
                    }
                }
            }
        }
        //全选与非全选
        function myfunc(chk){
             var chklist=document.getElementsByName('chkstu');

             for(var i=0;i<chklist.length;i++){
             	 chklist[i].checked=chk.checked;
             }
         }
         //删除所选
        function delnode(){
            var chklist=document.getElementsByName('chkstu');
            for(var i=chklist.length-1;i>=0;i--){
                var mychk=chklist[i];
                if(mychk.checked==true){
                    mytr=mychk.parentNode.parentNode;
                    pnode=mytr.parentNode;
                    pnode.removeChild(mytr);
                }
            }
        }
	    </script>
	<body>
		<form action="">
        <table border="1" width="400">
        <caption>
        
        <input type="button" value="删除所选" onclick='delnode()' id="btndel"></caption>
        
        	<tr>
        		<td width="60"><input type="checkbox" id="chkstu" onclick="myfunc(this)">全选</td>
        		<td>姓名</td>
        		<td>性别</td>
        		<td>年龄</td>
                <td>操作</td>
        	</tr>
        	<tr class="special">
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>李四</td>
        		<td>男</td>
        		<td>19</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr>
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>王五</td>
        		<td>男</td>
        		<td>22</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr class="special">
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>赵六</td>
        		<td>女</td>
        		<td>14</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr>
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>唐七</td>
        		<td>男</td>
        		<td>25</td>
                <td><a href="#">删除</a></td>
        	</tr>
        	<tr class="special">
        		<td width="60"><input type="checkbox" name="chkstu" ></td>
        		<td>韩八</td>
        		<td>男</td>
        		<td>11</td>
                <td><a href="#">删除</a></td>
        	</tr>
        </table>
		</form>

	</body>
	</html>

转载于:https://my.oschina.net/u/3807502/blog/1799058