JavaScript 获取复选框值并传递至后台的实现方案

作者:异步漫步

时间:2026-10-31

浏览:184

本文介绍如何在 JSP 页面中通过 JavaScript 获取多个复选框的值,并将其拼接为字符串传递给后台。核心步骤包括:定义复选框名称,编写点击事件函数遍历选中项,将结果存入隐藏字段,最后在后台通过分割字符串解析具体值。

文章目录

前端复选框定义与事件绑定

首先,为复选框元素指定统一的 name 属性,例如设置 name 为 'checkTheme',并赋予相应的 value 值:<input type='checkbox' name='checkTheme' value=''>

在提交按钮或相关触发元素上绑定 onclick 事件,调用自定义函数 aa() 来处理数据。


function aa() {
var bb = "";
var temp = "";
var a = document.getElementsByName("checkTheme");
for ( var i = 0; i < a.length; i++) {
if (a[i].checked) {
temp = a[i].value;
bb = bb + "," +temp;
}
}
document.getElementById("tempString").value = bb
.substring(1, bb.length);
}

在 JSP 页面中,添加一个隐藏类型的 input 字段,用于接收由函数 aa() 处理后的结果值。


<input type="hidden" id="tempString" name="tempString" />

后台数据接收与解析

接下来,在后台 Action 类中接收该隐藏字段传递的数据。

在 Java 类中定义一个名为 tempString 的私有字符串成员变量,并生成对应的 getter 和 setter 方法以获取前端传递的值。

使用 split 方法对 tempString 进行分割,传入逗号作为分隔符,从而将字符串转换为数组,提取出各个复选框的具体值:String temp1[] = tempString.split(",");

此时,数组 temp1[] 中存储的即为所有被选中复选框的 value 值。

以上即为通过 JavaScript 获取复选框值并成功传递至后台的完整实现流程,供开发者参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章