web页面之列表复选框选择功能

最新推荐文章于 2025-08-12 16:16:09 发布

原创最新推荐文章于 2025-08-12 16:16:09 发布 · 2.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

Web开发专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一种在Web页面中通过选择数据列表中的数据记录，并将其标识累积赋值到输入域中，进而传递给后台进行业务逻辑处理的方法。通过实例展示了如何利用JavaScript和模板引擎实现这一功能。

功能概述

web页面中，常见先查询取得数据列表，然后选择数据列表中的数据记录，对这些数据记录进行相关的业务逻辑处理。处理思路是这样的，每条数据记录都有一个唯一标识，我们把每条数据记录的标识放置在选择框checkbox控件中，选中选择框后把这些数据记录标识累积赋值到一个输入域中，再将这个输入域传递给后台业务逻辑处理即可。

页面效果

源码构件

1.引用js库：

2.页面中的表弟的表格如下：

<table>
<s:iterator value="#request.orderDatafPage"
var="orderDataNoDetailPage" status="stat">
<tr id="<s:property value="#orderDataNoDetailPage.fid"/>"
dataid="<s:property value="#orderDataNoDetailPage.fid"/>"
imgsrcdesplay="<s:property value="#orderDataNoDetailPage.simpleimg"/>"
geomdata="<s:property value="#orderDataNoDetailPage.fgeometryText"/>">
<td><input type="checkbox" class="noDetail"
value="<s:property value ='#orderDataNoDetailPage.fid'/>" />
</td>
<td><img src="" alt="" width="30" height="25" />
</td>

<td><s:property value='#orderDataNoDetailPage.satellite' />
</td>
<td><s:property value="#orderDataNoDetailPage.sensor" />
</td>
<td><s:property
value="%{getText('{0,date,yyyy-MM-dd }',{#orderDataNoDetailPage.productdate})}" />
</td>
<td><img src="<%=path%>/oms/images/magnifier.png"
style="cursor: pointer; width: 16px; height: 16px;"
onclick="showDiv(1,'<s:property value="#orderDataNoDetailPage.fid"/>');"
title="详细信息" />
</td>
</tr>
</s:iterator>
</table>

3.页面脚本