javascript實現 checkbox全選和批量刪除功能
<%@ 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" ></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"></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"></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>
相關文章
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- ListView全選刪除CheckBoxView
- jquery實現的全選和刪除功能外掛jQuery
- JavaScript checkbox全選和全不選效果JavaScript
- vue checkbox 實現全選,取消全選Vue
- js中checkbox的全選和反選的實現JS
- jQuery 實現checkBox全選效果jQuery
- javascript checkbox核取方塊全選和取消全選效果JavaScript
- 實現 UITableViewCell的批量刪除UIView
- vue 工作專案中 實現訊息列表的 全選,反選,刪除功能Vue
- Android列表實現單選、多選、全選、取消、刪除Android
- JavaScript--全選、全不選、反選、無重新整理刪除、批量刪除、即點即改入庫(在yii框架中操作)JavaScript框架
- Jquery實現頁面的新增、刪除、全選、取消全選、漸變色jQuery
- RecyclerView 實現滑動刪除和拖拽功能View
- RecyclerView實現滑動刪除和拖拽功能View
- javascript cookie的儲存和刪除功能JavaScriptCookie
- 批量刪除容器和映象
- js checkbox 全選 取消全選JS
- jquery實現checkbox核取方塊全選效果jQuery
- checkbox全選和取消全選完整程式碼例項
- JavaScript實現單擊全選 ,再次點選取消全選JavaScript
- 用javascript實現全選/反選元件JavaScript元件
- docker 批量刪除容器和映象Docker
- vue.js單選全選刪除Vue.js
- 【xh&hhh】ASP.NET2.0下利用javascript實現TreeView中的checkbox全選!ASP.NETJavaScriptView
- avalon繫結實現checkbox全選簡單介紹
- vue+element-ui操作刪除(單行和批量刪除)VueUI
- javascript實現點選彈出確認刪除警告框程式碼JavaScript
- collectionView--編輯全選刪除View
- React實現全選和反選React
- php(js)批量刪除/單個刪除PHPJS
- ALV程式checkbox全選及取消全選
- checkbox核取方塊全選和取消全選例項程式碼
- javascript實現的動態新增和刪除表格行程式碼JavaScript行程
- jQuery核取方塊checkbox的全選和反選jQuery
- 批量刪除死鎖
- oracle批量刪除表Oracle
- hibernate批量刪除