<c:foreach>与checkbox开发中遇到问题
2016-07-04 11:49
316 查看
1、选中checkbox获取对应id
<form action="clockinaddress/list.do" method="post" name="Form"
id="Form">
<!-- 列表 -->
<table id="table_report"
class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center"><label><input type="checkbox"
id="zcheckbox" /><span class="lbl"></span>
</label></th>
<th class="center">序号</th>
<th class="center">标题</th>
<th class="center">日期</th>
</tr>
</thead>
<tbody>
<!-- 开始循环 -->
<c:choose>
<c:when test="${not empty varList}">
<c:if test="${QX.cha == 1 }">
<c:forEach items="${varList}" var="var" varStatus="vs">
<tr>
<td class='center' style="width: 30px;"><label>
<input type='checkbox' name='ids' value="${var.ADDRESS_ID}" <c:forEach items="${paList}" var="pa" ><c:if test="${pa.GRIDID == var.ADDRESS_ID}">checked="checked"</c:if></c:forEach> />
<span class="lbl"></span>
</label>
</td>
<td class='center' style="width: 30px;">${vs.index+1}</td>
<td>${var.TITLE}</td>
<td>${var.CREATEDATE}</td>
</tr>
</c:forEach>
</c:if>
</c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="100" class="center">没有相关数据</td>
</tr>
</c:otherwise>
</c:choose>
</tbody>
</table>
</form>
<script>
$(function() {
//复选框
$('table th input:checkbox').on('click' , function(){
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function(){
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
//获取默认选择内容
var str = '';
for(var i=0;i < document.getElementsByName('ids').length;i++)
{
if(document.getElementsByName('ids')[i].checked){
if(str=='') str += document.getElementsByName('ids')[i].value;
else str += ',' + document.getElementsByName('ids')[i].value;
}
}
});
2、回显选中数据
使用两个<c:forEach>即可
<c:forEach items="${varList}" var="var" varStatus="vs">
<tr>
<td class='center' style="width: 30px;"><label>
<input type='checkbox' name='ids' value="${var.ADDRESS_ID}" <c:forEach items="${paList}" var="pa" ><c:if test="${pa.GRIDID == var.ADDRESS_ID}">checked="checked"</c:if></c:forEach> />
<span class="lbl"></span>
</label>
</td>
<td class='center' style="width: 30px;">${vs.index+1}</td>
<td>${var.TITLE}</td>
<td>${var.CREATEDATE}</td>
<td>${var.SETMAN}</td>
<td>${var.ADDRESS}</td>
<td>${var.X}</td>
<td>${var.Y}</td>
</tr>
</c:forEach>
<form action="clockinaddress/list.do" method="post" name="Form"
id="Form">
<!-- 列表 -->
<table id="table_report"
class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center"><label><input type="checkbox"
id="zcheckbox" /><span class="lbl"></span>
</label></th>
<th class="center">序号</th>
<th class="center">标题</th>
<th class="center">日期</th>
</tr>
</thead>
<tbody>
<!-- 开始循环 -->
<c:choose>
<c:when test="${not empty varList}">
<c:if test="${QX.cha == 1 }">
<c:forEach items="${varList}" var="var" varStatus="vs">
<tr>
<td class='center' style="width: 30px;"><label>
<input type='checkbox' name='ids' value="${var.ADDRESS_ID}" <c:forEach items="${paList}" var="pa" ><c:if test="${pa.GRIDID == var.ADDRESS_ID}">checked="checked"</c:if></c:forEach> />
<span class="lbl"></span>
</label>
</td>
<td class='center' style="width: 30px;">${vs.index+1}</td>
<td>${var.TITLE}</td>
<td>${var.CREATEDATE}</td>
</tr>
</c:forEach>
</c:if>
</c:when>
<c:otherwise>
<tr class="main_info">
<td colspan="100" class="center">没有相关数据</td>
</tr>
</c:otherwise>
</c:choose>
</tbody>
</table>
</form>
<script>
$(function() {
//复选框
$('table th input:checkbox').on('click' , function(){
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function(){
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
//获取默认选择内容
var str = '';
for(var i=0;i < document.getElementsByName('ids').length;i++)
{
if(document.getElementsByName('ids')[i].checked){
if(str=='') str += document.getElementsByName('ids')[i].value;
else str += ',' + document.getElementsByName('ids')[i].value;
}
}
});
2、回显选中数据
使用两个<c:forEach>即可
<c:forEach items="${varList}" var="var" varStatus="vs">
<tr>
<td class='center' style="width: 30px;"><label>
<input type='checkbox' name='ids' value="${var.ADDRESS_ID}" <c:forEach items="${paList}" var="pa" ><c:if test="${pa.GRIDID == var.ADDRESS_ID}">checked="checked"</c:if></c:forEach> />
<span class="lbl"></span>
</label>
</td>
<td class='center' style="width: 30px;">${vs.index+1}</td>
<td>${var.TITLE}</td>
<td>${var.CREATEDATE}</td>
<td>${var.SETMAN}</td>
<td>${var.ADDRESS}</td>
<td>${var.X}</td>
<td>${var.Y}</td>
</tr>
</c:forEach>
相关文章推荐
- ZooKeeper开发者指南(五)
- 源代码管理
- 网络监控平台Shinken
- 2016全球大数据战略版图剖析(5):应用篇
- 时下流行devops关键词:分布式架构、一体化架构和微服务架构
- 【TJOI2013】单词
- Android系统Recovery工作原理之使用update.zip升级过程分析(六)---Recovery服务流程细节
- Java对象序列化
- 软件行业职位及相关缩写
- 读写文件
- Mac 下创建隐藏用户
- 时隔几年,我又回来吐槽了,这几年糟心事太多了。也没啥进步
- 双 MySQL 启动、停止脚本
- springMVC和spring上下文的关系
- [javaEE] 三层架构案例-用户模块(一)
- 说一说Android中的广播那回事
- openstack图库
- iOS Storyboards Container View Controller整理笔记
- es 常用curl命令
- 苹果客服