jsp中点击一个多选框,实现全选或全不选
来源:互联网 发布:淘宝苏宁易购怎么自提 编辑:程序博客网 时间:2024/05/17 12:03
当点击页面表头的多选框,则每一行的多选框都会被选中或释放,实现了全选。JSP页面的代码中还实现了多选删除。其实全选也是为了实现多项选择然后删除。多选删除提交的时候用的是超链接提交表单,它的功能就是可以提交表单中没有的值。
js代码
<script type="text/JavaScript">
function checkt(){
var checkAll=document.getElementById("checkAll");
console.log(checkAll);
checkAll.value==1 ? checkAll.value=2 : checkAll.value=1;
var uids=document.getElementsByName("uid");
for(var i=0;i<uids.length;i++){
if(checkAll.value==1){
uids[i].checked=false;//全不选
}else{
uids[i].checked=true;//全不选
}
}
}
</script>
jQuery代码
<script type="text/javascript">
//live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
$("#checkAll").live("click",function(){
if($("#checkAll").attr("checked",true)){
//attr() 方法设置或返回被选元素的属性值。 这里用class选择器因为有多个选择框
$(".uid").attr("checked",true);
}else{
$(".uid").attr("checked",false);
}
});
</script>
jsp页面中的代码
<form name="myform" id="f2" method="post">
<table class="table">
<tr class="table_header">
<td align="center"><input type="checkbox" name="checkAll" id="checkAll" value="1" onclick="checkt()"></td>
<td>序号</td>
<td>账号</td>
<td>昵称</td>
<td>Email</td>
<td>性别</td>
<td>家庭住址</td>
<td>头像</td>
<td>操作</td>
</tr>
<%
List<User> list=(List<User>)request.getAttribute("userList");
if(list!=null){
for(int i=0 ; i<list.size();i++){
User user=list.get(i);
%>
<tr class="row<%=((i+1)%2==0?2:1) %>">
<td align="center"><input type="checkbox" class="uid"name="uid" value="<%=user.getUid()%>"></td>
<td><%=i+1 %></td>
<td><%=user.getAccount() %></td>
<td><%=user.getName() %></td>
<td><%=user.getEmail() %></td>
<td><%=(user.getSex()!=null?(user.getSex().equals("0")?"男":"女"):"") %></td>
<td><%=(user.getProvince()==null?"":user.getProvince())+(user.getCity()==null?"":user.getCity())+(user.getCounty()==null?"":user.getCounty())%></td>
<td><%=(user.getPicture()==null?"":user.getPicture()) %></td>
<td><a id="mydel"
href="DeleteUserServlet?uid=<%=user.getUid()%>"
onclick="return confirm('确定要删除吗?')">删除</a>
</tr>
<%
}
}
%>
</table>
<div id="mydiv">
<span id="myspan" >
<a id="mydel" href="javascript:myform.action='DeleteUserServlet';myform.submit()"
onclick="return confirm('确定要删除吗?')">删除所选</a>
<a href=" ">生成EXCEL</a>
<a href="ToBookSelectServlet?type=1&curpage=">首页</a>
<a href="ToBookSelectServlet?type=2&curpage=">上一页</a>
<a href="ToBookSelectServlet?type=3&curpage=">下一页</a>
<a href="ToBookSelectServlet?type=4&curpage=">末页</a>
</span>
</div>
</form>
js代码
<script type="text/JavaScript">
function checkt(){
var checkAll=document.getElementById("checkAll");
console.log(checkAll);
checkAll.value==1 ? checkAll.value=2 : checkAll.value=1;
var uids=document.getElementsByName("uid");
for(var i=0;i<uids.length;i++){
if(checkAll.value==1){
uids[i].checked=false;//全不选
}else{
uids[i].checked=true;//全不选
}
}
}
</script>
jQuery代码
<script type="text/javascript">
//live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
$("#checkAll").live("click",function(){
if($("#checkAll").attr("checked",true)){
//attr() 方法设置或返回被选元素的属性值。 这里用class选择器因为有多个选择框
$(".uid").attr("checked",true);
}else{
$(".uid").attr("checked",false);
}
});
</script>
jsp页面中的代码
<form name="myform" id="f2" method="post">
<table class="table">
<tr class="table_header">
<td align="center"><input type="checkbox" name="checkAll" id="checkAll" value="1" onclick="checkt()"></td>
<td>序号</td>
<td>账号</td>
<td>昵称</td>
<td>Email</td>
<td>性别</td>
<td>家庭住址</td>
<td>头像</td>
<td>操作</td>
</tr>
<%
List<User> list=(List<User>)request.getAttribute("userList");
if(list!=null){
for(int i=0 ; i<list.size();i++){
User user=list.get(i);
%>
<tr class="row<%=((i+1)%2==0?2:1) %>">
<td align="center"><input type="checkbox" class="uid"name="uid" value="<%=user.getUid()%>"></td>
<td><%=i+1 %></td>
<td><%=user.getAccount() %></td>
<td><%=user.getName() %></td>
<td><%=user.getEmail() %></td>
<td><%=(user.getSex()!=null?(user.getSex().equals("0")?"男":"女"):"") %></td>
<td><%=(user.getProvince()==null?"":user.getProvince())+(user.getCity()==null?"":user.getCity())+(user.getCounty()==null?"":user.getCounty())%></td>
<td><%=(user.getPicture()==null?"":user.getPicture()) %></td>
<td><a id="mydel"
href="DeleteUserServlet?uid=<%=user.getUid()%>"
onclick="return confirm('确定要删除吗?')">删除</a>
</tr>
<%
}
}
%>
</table>
<div id="mydiv">
<span id="myspan" >
<a id="mydel" href="javascript:myform.action='DeleteUserServlet';myform.submit()"
onclick="return confirm('确定要删除吗?')">删除所选</a>
<a href=" ">生成EXCEL</a>
<a href="ToBookSelectServlet?type=1&curpage=">首页</a>
<a href="ToBookSelectServlet?type=2&curpage=">上一页</a>
<a href="ToBookSelectServlet?type=3&curpage=">下一页</a>
<a href="ToBookSelectServlet?type=4&curpage=">末页</a>
</span>
</div>
</form>
阅读全文
0 0
- jsp中点击一个多选框,实现全选或全不选
- jsp中点击一个多选框,实现全选或全不选
- 如何在DATAGRID中一个按钮实现全选或全不选
- js点击复选框全选或全不选
- 实现全选或全不选js
- 点击TextBox实现全选,并点击复制到剪贴板中
- javaScript实现点击全选
- js 实现全选或全不选的功能
- jsp实现全选
- jQuery实现点击全选和取消全选
- jQuery实现点击全选和取消全选
- js实现datalist中checkbox全选或取消
- GridView中实现全选完成批量审批或批量删除
- GridView中实现全选完成批量审批或批量删除
- JSP中checkbox实现全选等功能_1
- 在jsp中js jquery点击按钮出现一个对话框的实现
- 鼠标点击文本框后,里面的文字就消失或全选中----->特别推荐
- 全选或全不选
- Android屏幕直播方案
- 关于VM12使用U盘(优启通)启动的设置,安装Windows7gost
- Sketch Tutorial
- 在c#中调用python
- struts2返回数据到EasyUi或者bootstrap的表格
- jsp中点击一个多选框,实现全选或全不选
- mysql排序字段的索引认识
- PHP那些琐碎的知识点
- 第一讲 Hello Spring MVC
- 视频转换 质量少许改变 清晰度不怎么改变 格式工厂
- Python 交叉排序题
- IDEA openjdk platform binary 已停止工作 的解决办法
- 资源混淆工具AndResGuard
- Java学习之类加载器