浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)


Posted in Javascript onJanuary 08, 2018

我这里往后端传递checkbox 多选框value的值是通过字符串方式传递,先调用js对选定checkbox遍历获取选的的boxvalue,然后写进隐藏域,最后作文对象的属性提交。见代码:`

前端:

<form:form commandName="user" method="post">
     <c:forEach items="${deploys}" var="deploy" varStatus="deployStatus">
      <input type="checkbox" name="checkbox" value="${deploy.id}"/>${deploy.systemName}
      <br>
     </c:forEach>
     <spring:bind path="id">//实际存储的值,此处隐藏
      <div class="form-group" hidden>
       <form:input path="id" name="id" cssClass="form-control"></form:input>
      </div>
     </spring:bind>
     <spring:bind path="accessControl">//实际存储的值,此处隐藏
      <div class="form-group" hidden>
       <form:input path="accessControl" name="accessControl" cssClass="form-control"></form:input>
      </div>
     </spring:bind>
     <input type='button' value='确定' onclick="fun()"/>//调用脚本,给需要post的数据赋值
     <div class="form-group">
      <button type="submit" class="btn btn-primary">保存</button>
      <a class="btn btn-success pull-right" href="/user/list" rel="external nofollow" >返回</a>
     </div>
 </form:form>

脚本:

<script type="text/javascript">
 function fun() {
  var boxes = document.getElementsByTagName("input");
//  var val = []
  var str = "";
  for (var i = 0; i < boxes.length; i++) {
   if (boxes[i].name == "checkbox" && boxes[i].checked == true) {
//    val.push(boxes[i].value);
    str += boxes[i].value + ',';
   }
  }
  $("#accessControl").val(str)
//  alert(atr);
//  alert(val);
 }
</script>

后端:

@RequestMapping(value = "editaccesscontrol", method = RequestMethod.POST) //后端方法,
 public String editAccessControlPost(User user,ModelMap model ) {//接收参数对象user
  userMapper.updateUserAccessControl(user);
  model.addAttribute("user",user);
  model.addAttribute("success", "权限修改成功");
  return "redirect:/user/editaccesscontrol?id="+user.getId();
 }

以上这篇浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 #Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
Angular 项目实现国际化的方法
Jan 08 #Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
简易Vue评论框架的实现(父组件的实现)
Jan 08 #Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 #Javascript
You might like
PHP的加密方式及原理
2012/06/14 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python语法快速入门指南
2015/10/12 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Django框架模板介绍
2019/01/15 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
庆元旦广播稿
2014/02/10 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
地震捐款简报
2015/07/21 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Nginx实现负载均衡的项目实践
2022/03/18 Servers