Scala Play Framework：无JS实现控制器与复选框绑定示例及传参咨询

嘿，这就给你整一个纯后端实现的复选框绑定方案，完全不用碰JavaScript，适合简单的表单提交场景～

1. 定义数据模型 #

首先我们先搞个简单的任务模型，用来模拟复选框对应的选项：

case class Task(id: Long, name: String)

// 用于表单绑定的辅助类（可选，让代码更规范）
case class TaskSelection(selectedTaskIds: Seq[Long])

2. 编写控制器代码 #

控制器里要做两件事：一是渲染带复选框的页面，二是接收并处理选中的复选框数据。这里提供两种获取选中值的方式，按需选择：

import play.api.mvc._
import play.api.data._
import play.api.data.Forms._

class TasksController @Inject()(val controllerComponents: ControllerComponents) extends BaseController {

  // 模拟测试数据
  private val sampleTasks = Seq(
    Task(1, "完成Scala教程"),
    Task(2, "整理Play文档"),
    Task(3, "写Demo代码")
  )

  // 表单绑定规则（对应上面的TaskSelection）
  private val taskSelectionForm = Form(
    mapping(
      "taskIds" -> seq(longNumber)
    )(TaskSelection.apply)(TaskSelection.unapply)
  )

  // 显示带复选框的页面
  def index() = Action { implicit request: MessagesRequest[AnyContent] =>
    Ok(views.html.tasks(sampleTasks))
  }

  // 方式一：用表单绑定接收选中的ID（推荐，更符合Play的规范）
  def handleSelectionWithForm() = Action { implicit request: MessagesRequest[AnyContent] =>
    taskSelectionForm.bindFromRequest().fold(
      formWithErrors => {
        // 绑定失败的处理，比如返回错误页面
        BadRequest("表单绑定失败")
      },
      selection => {
        // 拿到选中的任务ID列表，这里可以做业务处理
        println(s"选中的任务ID：${selection.selectedTaskIds}")
        Ok(s"成功选中任务ID：${selection.selectedTaskIds.mkString(", ")}")
      }
    )
  }

  // 方式二：直接从请求中获取参数（快速简单）
  def handleSelectionDirect() = Action { implicit request: MessagesRequest[AnyContent] =>
    val selectedIds = request.body.asFormUrlEncoded.getOrElse("taskIds", Seq.empty).map(_.toLong)
    println(s"选中的任务ID：$selectedIds")
    Ok(s"成功选中任务ID：${selectedIds.mkString(", ")}")
  }
}

3. 编写视图模板（tasks.scala.html） #

视图里要生成复选框，关键是所有复选框的name属性要保持一致（这里是taskIds），这样提交时Play会自动把所有选中的value打包成序列：

@(tasks: Seq[Task])(implicit request: MessagesRequestHeader, flash: Flash)

@main("任务选择") {
  <h1>选择你要处理的任务</h1>
  
  <!-- 表单提交到表单绑定的action，或者直接提交的action -->
  <form action="@routes.TasksController.handleSelectionWithForm()" method="POST">
    @tasks.map { task =>
      <div>
        <input type="checkbox" name="taskIds" value="@task.id" id="task_@task.id">
        <label for="task_@task.id">@task.name</label>
      </div>
    }
    <button type="submit">提交选择</button>
  </form>
}

4. 配置路由 #

在conf/routes里添加对应的路由规则：

GET     /tasks                          controllers.TasksController.index()
POST    /tasks/select-with-form         controllers.TasksController.handleSelectionWithForm()
POST    /tasks/select-direct            controllers.TasksController.handleSelectionDirect()

关键说明 #

• 复选框命名规则：所有复选框的name必须相同（比如这里的taskIds），这样HTTP提交时会把所有选中的value作为一个数组传递给服务器。
• 传递名称而非ID：如果需要传递任务名称，只需要把复选框的value改成@task.name，然后控制器里接收Seq[String]即可。
• 表单绑定vs直接取参数：表单绑定更适合复杂场景，能自动做类型转换和验证；直接取参数适合快速实现简单需求。

测试的时候，启动Play应用，访问/tasks，勾选几个复选框提交，就能在控制台看到选中的ID，页面也会返回对应的结果啦～

内容的提问来源于stack exchange，提问作者Edward