jQuery、html、JavaScript实现全选、反选、批量删除

最新推荐文章于 2024-05-12 10:53:30 发布

拉莫帅

最新推荐文章于 2024-05-12 10:53:30 发布

阅读量8k

点赞数 5

分类专栏： AngularJs、jQuery、JavaScript 文章标签： jQuery html javaScript

本文链接：https://blog.csdn.net/chen_md/article/details/78997481

版权

AngularJs、jQuery、JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方式一：重点内容

<input type="button" onclick="delAll()" value="批量删除" />
        <input type="button" onclick="che()" value="全选/反选" />
        <table border="1" cellspacing="0" cellpadding="0" class="bg">
            <tr>
                <td><input type="checkbox" onclick="cheAll()" id="che"></td>
                <td>姓名</td>
                <td>性别</td>
                <td>生日</td>
                <td>住址</td>
                <td>操作</td>
            </tr>
        </table>
   <script>
   
//全选
   function cheAll(){
            var cek = $("#che")[0].checked;
            var ck = $("input[name='ck']");
            for(var i = 0; i < ck.length; i++){
                ck[i].checked = cek;
            }
        }

//反选
        function che(){
            var cks = document.getElementsByName("ck");
            for(var i = 0; i < cks.length; i++) {
                cks[i].checked = !cks[i].checked;
            }
        }

//批量删除
        function delAll(){
            var ck = $("input:checked[name='ck']");
            if(ck.length == 0){
                alert("请选择,然后进行删除");
                return;
            }
            var f=confirm("确认删除!!");
            if(!f){
                return;
            }
            for(var i = 0; i < ck.length; i++){
                ck[i].parentNode.parentNode.remove();
            }
        }
    </script>

方式二：

<script type="text/javascript">
		//全选的功能
		function allcheck(){
			//先得到所有的checkbox
			var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
			//循环这一组checkbox让每一个checkbox选中
			for(var i=0;i<ck.length;i++){
				var c=ck[i];//得到一个checkbox
				c.checked=true;//true代表选中
			}
		}
		
		//全不选
		function allnotcheck(){
			//先得到所有的checkbox
			var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
			//循环这一组checkbox让每一个checkbox选中
			for(var i=0;i<ck.length;i++){
				var c=ck[i];//得到一个checkbox
				c.checked=false;//false代表不选
			}
		}
		//反选
		function backcheck(){//先得到所有的checkbox
			var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
			//循环这一组checkbox让每一个checkbox选中
			for(var i=0;i<ck.length;i++){
				var c=ck[i];//得到一个checkbox
				if(c.checked==true){//如果当前的checkbox是选中的则不让其选中
					ck[i].checked=false;
				}else{
					ck[i].checked=true;
				}
			}
		}
		
		//批量删除
		function alldel(){
			var f=false;
			//得到要删除的主键id
			var arr=[];//用于存要删除的选中的id值
			
			var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
			//循环这一组checkbox让每一个checkbox选中
			for(var i=0;i<ck.length;i++){
				if(ck[i].checked==true){//代表选中
					arr.push(ck[i].value);
					f=true;
				}
			}
			
			//alert(arr);
			//跳到删除的servlet里去
			if(f==true){
				if(confirm("您确认要删除吗？"))
					location.href="servlet/DelServlet?ids="+arr;
			}else{
				alert("请至少选中一条进行批量删除");
			}
		}
	</script>

  </head>
  
  <body>
    <center>
    <input type="radio" id="allcheck" name="allcheck" onclick="allcheck();"/>全选&nbsp;&nbsp;
    <input type="radio" id="allnotcheck" name="allcheck"  onclick="allnotcheck();"/>全不选&nbsp;&nbsp;
    <input type="radio" id="backcheck" name="allcheck"  onclick="backcheck();"/>反选&nbsp;&nbsp;
    <a href="javascript:void(0);" onclick="alldel();">批量删除</a>
    <br/>
    	<table border="1">
    		<tr>
    			<td></td>
    			<td>序号 </td>
    			<td>姓名</td>
    			<td>邮箱 </td>
    			<td>密码 </td>
    		</tr>
    		<c:forEach var="u" items="${list}">
	    		<tr>
	    			<td>
	    				<input type="checkbox" name="ck" value="${u.id}"/>
	    			</td>
	    			<td>${u.id } </td>
	    			<td>${u.name }</td>
	    			<td>${u.email } </td>
	    			<td>${u.pwd } </td>
	    		</tr>
    		</c:forEach>
    	
    	</table>
    	
    </center>
  </body>
</html>

拉莫帅

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
jQuery、html、JavaScript实现全选、反选、批量删除

方式一：重点内容input type=&quot;button&quot; onclick=&quot;delAll()&quot; value=&quot;批量删除&quot; /&gt; input type=&quot;button&quot; onclick=&quot;che()&quot; value=&quot;全选/反选&quot; /&gt;
复制链接

扫一扫