复选框事件

最新推荐文章于 2021-06-03 14:15:00 发布

Demonor_

最新推荐文章于 2021-06-03 14:15:00 发布

阅读量1.1k

点赞数 1

分类专栏： html 文章标签：复选框 checkbox

本文链接：https://blog.csdn.net/a13432421434/article/details/81449942

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- jquery -->

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> 

<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-3.3.1.min.js"></script> --%>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/bootstrap.js"></script> --%>
<%-- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/bootstrap.css">--%>

<script type="text/javascript">
$(function(){
    //点击表头复选框，全选/全不选
	$("#all").on("click",function(){
          //如果表头刚刚点击勾选上，全选
		  if($(this).prop("checked")){
            //遍历列表的复选框
		    $("input[name='aa']").each(function(){
		      $(this).prop("checked","checked");  //打勾
		    })
		  }
          //否则全不选
		  else{
            //遍历列表的复选框
		    $("input[name='aa']").each(function(){
		      $(this).prop("checked",false); //去掉勾选
		      $(this).removeAttr("checked");//若上一行代码失效，可以用这行代码  //去掉勾选
		    })
		  }
		  
		})
		
		$("#del_selected").on("click",function(){
			var userIds = "";
			$("input[name='aa']").each(function(){
			     if($(this).prop("checked")){
			    	 userIds += $(this).attr("userId")+"※";
			     }
			})
			
			if(userIds==""){
				alert("请选择需要删除的用户");
				return;
			}
			
			alert("需要删除的用户id为："+userIds+"\n"+"然后ajax传参数到后台异步更新并返回操作结果。")
		})
})
</script>


</head>
<body>
<div id="main" style="width:400px;height:auto;margin:auto;margin-top:40px;"> 
  	<table class="table table-bordered">
  	<thead>
  	<tr>
  	<th><input  id="all" type="checkbox" /></th>
  	<th>姓名</th>
  	<th>年龄</th>
  	</tr>
  	</thead>
  	<tr>
  	<td><input userId="001" name="aa" type="checkbox" /></td>
  	<td>Demonor</td>
  	<td>22</td>
  	</tr>
  	
  	<tr>
  	<td><input userId="002" name="aa" type="checkbox" /></td>
  	<td>Amy</td>
  	<td>19</td>
  	</tr>
  	
  	<tr>
  	<td><input userId="003" name="aa" type="checkbox" /></td>
  	<td>Sky</td>
  	<td>20</td>
  	</tr>
  	
  	<tbody>
  	
  	</tbody>
  	
  	</table>	
  	
  	<button class="btn btn-sm btn-danger" id="del_selected" style="width:80px;height:30px;">删除</button>
  	</div>
  	
  			 
</body>
</html>

Demonor_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复选框事件

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;!-- jquery --&gt;&lt;script src="http://cdn.bootcss.com/j
复制链接

扫一扫