javascript實現 checkbox全選和批量刪除功能

hanchufeng2020發表於2020-10-10
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>國際學生</title>
		<link rel="stylesheet" type="text/css" href="/jywstjxt/admin/static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="/jywstjxt/admin/static/admin/css/admin.css" />
	<%Integer count =(Integer)request.getAttribute("count");
		int zys= count%8!=0?count/8+1:count/8;
		String  star = (String)request.getAttribute("star");
		String xsxm =(String)request.getAttribute("xsxm");
		String gb =(String)request.getAttribute("gb");
		String xxqc =(String)request.getAttribute("xxqc");
		
	%>
	<style>
     一下樣式因為框架使用到了layui樣式,所以自己新增的checkbox不起作用,需要註釋掉原來的,
   啟用自己的
		.layui-form input[type=checkbox], .layui-form input[type=radio], .layui-form select {
		    display: block;
		}
		.layui-form-checkbox {
		    position: relative;
		    height: 30px;
		    line-height: 28px;
		    margin-right: 10px;
		    padding-right: 30px;
		    border: 1px solid #d2d2d2;
		    cursor: pointer;
		    font-size: 0;
		    border-radius: 2px;
		    -webkit-transition: .1s linear;
		    transition: .1s linear;
		    box-sizing: border-box!important;
		    display: none;
		}
	</style>
	</head>
<body>
	<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<form action="/jywstjxt/gjxs" method="post">
						<div class="layui-form-item">
							<div class="layui-inline tool-btn">
								<a class="layui-btn layui-btn-small layui-btn-normal " onclick="location.href='/jywstjxt/gjxs_add'" title="新增"><i class="layui-icon" >&#xe654;</i></a>
							</div>
							<div class="layui-inline">
								<input type="text" name="xsxm" placeholder="請輸入學生姓名" autocomplete="off" class="layui-input" value="${xsxm }">
							</div>
							<div class="layui-inline">
								<input type="text" name="gb" placeholder="請輸入國別" autocomplete="off" class="layui-input" value="${gb }">
							</div>
							<div class="layui-inline">
								<input type="text" name="xxqc" placeholder="請輸入招收院校" autocomplete="off" class="layui-input" value="${xxqc }">
							</div>
<!-- 							<button class="layui-btn layui-btn-normal" lay-submit="search">搜尋</button> -->
							<input type="submit" value="搜尋" class="layui-btn layui-btn-normal">
							<button class="layui-btn layui-btn-normal" onclick="cz()">重置</button>
						<a class="layui-btn layui-btn-normal" onclick="dc()">匯出</a>
						<input type="file" id="file" name="myfile" style="display: none"/> 
							<input type="text" id="filename" style="display: none"/> 
							<a class="layui-btn layui-btn-normal" onclick="dr()">匯入</a>
							<a class="layui-btn layui-btn-normal"  onclick="batchdelete()"> 刪除</a>
					
						</div>
					</form>
					<div class="layui-form" id="table-list" style="overflow: auto;">
						<table class="layui-table" style="width: 200%;" lay-even lay-skin="nob">

							<thead>
								<tr>
								<th><input type="checkbox" name="chkAll" size="10" onclick="chkAll_onclick(this)" /></th>
								
									<th>護照號碼</th>
									<th>護照有效期</th>
									<th>JW202表編號</th>
									<th>學號</th>
									<th>CSC登記號</th>
									<th>州別</th>
									<th>國別</th>
									<th>姓名</th>
									<th>性別</th>
									<th>出生日期</th>
									<th>專業</th>
									<th>學科</th>
									<th>來華日期</th>
									<th>入專業日期</th>
									<th>學校(全稱)</th>
									<th>在學地區</th>
									<th>預計離校日期</th>
									<th>學生類別</th>
									<th>經費來源</th>
									<th>學習狀態</th>
									<th>離校日期</th>
									<th style="width: 86px;">操作</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${gjxs }" var="gjxs">
								<tr>
							 <td ><input type="checkbox" name="chk" value="${gjxs.xsbh }" onclick="chk_onclick(this)"/></td>
								
									<td class="hidden-xs">${gjxs.hzhm }</td>
									<td class="hidden-xs">${gjxs.hzyxq }</td>								
									<td class="hidden-xs">${gjxs.jw202 }</td>								
									<td class="hidden-xs">${gjxs.xh }</td>								
									<td class="hidden-xs">${gjxs.gscdjh }</td>								
									<td class="hidden-xs">${gjxs.zb }</td>
									<td class="hidden-xs">${gjxs.gb }</td>
									<td class="hidden-xs">${gjxs.xsxm }</td>
									<td class="hidden-xs">${gjxs.xb }</td>
									<td class="hidden-xs">${gjxs.csrq }</td>
									<td class="hidden-xs">${gjxs.zy }</td>
									<td class="hidden-xs">${gjxs.xk }</td>
									<td class="hidden-xs">${gjxs.lhrq }</td>
									<td class="hidden-xs">${gjxs.rzyrq }</td>
									<td class="hidden-xs">${gjxs.xxqc }</td>
									<td class="hidden-xs">${gjxs.zxdq }</td>
									<td class="hidden-xs">${gjxs.yjlxrq }</td>
									<td class="hidden-xs">${gjxs.xslb }</td>		
									<td class="hidden-xs">${gjxs.jfly }</td>								
									<td class="hidden-xs">${gjxs.xxzt }</td>
									<td class="hidden-xs">${gjxs.lxrq }</td>															
									<td>
										<div class="layui-inline">
											<button class="layui-btn layui-btn-small layui-btn-normal go-btn" data-id="1" onclick="edit(this)" title="修改" value="${gjxs.xsbh }"><i class="layui-icon">&#xe642;</i></button>
											<button class="layui-btn layui-btn-small layui-btn-danger del-btn" data-id="1" onclick="del(this)" title="刪除" value="${gjxs.xsbh }"><i class="layui-icon">&#xe640;</i></button>
										</div>
									</td>
								</tr>
								</c:forEach>
							</tbody>
						</table>
						<div class="page-wrap">
							<ul class="pagination">
								<li class="disabled">
									<a href="/jywstjxt/gjxs?star=1&xsxm=<%=xsxm%>">首頁</a>
								</li>
							<%for(int i=1;i<=zys;i++){ %>
								<li id="ys<%=i %>" onclick="blue(this)">
									<a href="/jywstjxt/gjxs?star=<%=i%>&xsxm=<%=xsxm%>"><%=i %></a>
								</li>
								<%} %>
								<li class="disabled">  
									<a href="/jywstjxt/gjxs?star=<%=zys %>&xsxm=<%=xsxm%>">末頁</a>
								</li>
							</ul> 
						</div>
						共${count }條資料  
					</div>
				</div>
		</div>
		<script src="/jywstjxt/admin/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="/jywstjxt/admin/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
	<script type="text/javascript">
    //批量刪除
	function batchdelete(){
		if(confirm("確定要刪除嗎?")){
			  var obj=document.getElementsByName('chk'); //選擇所有name="'test'"的物件,返回陣列 
			    //取到物件陣列後,我們來迴圈檢測它是不是被選中 
			    var s=''; 
			    for(var i=0; i<obj.length; i++){ 
			        if(obj[i].checked) s+=obj[i].value+','; //如果選中,將value新增到變數s中 
			    } 
			    //那麼現在來檢測s的值就知道選中的核取方塊的值了 
			    //alert(s==''?'你還沒有選擇任何內容!':s); 
			    if(s==''){
			    	alert("你還沒有選擇任何內容!");
			    	return;
			    }
			location.href="/jywstjxt/gjxs_deleteAll?ids="+s;
		}
		
	}
//全選中
	function chkAll_onclick(obj)
	{
 		
		var chks = document.getElementsByName("chk");
		for( var i = 0 ; i < chks.length ; i++ )
		{
			chks[i].checked = obj.checked;
		}
	}
//單個選中
	function chk_onclick(obj)
	{
		
		var chks = document.getElementsByName("chk");
		var	chkAll=document.getElementsByName("chkAll");
		if(obj.checked==false)
				chkAll[0].checked=false;
		else
		{
			var j=1;
			for( var i = 0 ; i < chks.length ; i++ )
			{
				if(chks[i].checked==false)
				{   j=2;
					break;
				}
			}
			if (j==1)
				chkAll[0].checked=true;
		}
	}
	</script>
</body>
</html>

 

相關文章