jQuery+SpringMVC中的复选框选择与传值实例


Posted in jQuery onJanuary 08, 2018

一、checkbox选择

在jQuery中,选中checkbox通用的两种方式:

$("#cb1").attr("checked","checked");
$("#cb1").attr("checked",true);

对应的jQuery函数,主要完成三个功能:

1、第一个复选框选中或取消选中,则下面的复选框为全选或取消全选;

2、当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没有被选中时,则第一个复选框取消选中;

3、将下面的复选框的id值传递给Controller层,组成id数组,然后调用相应的方法(一般都是删除)。

<script type="text/javascript">  function chgAll(t){//第一个复选框选中或取消选中,则下面的复选框为全选或取消全选;
    $("input[name='id']").attr('checked',t.checked);//改变name名为id的input标签内的复选框的checked属性
  }
  function chg(){//当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没有被选中时,则第一个复选框取消选中;
    var ids = $.makeArray($("input[name='id']"));
    for(var i in ids){
      if(ids[i].checked==false){//如果所有的复选框只要有一个未选中,则第一个复选框不会选中
        $("input[name='ids']").attr('checked', false);
        return;
      }
    }
    $("input[name='ids']").attr('checked', true);//全部选中的情况下,则第一个复选框选中
  }
  function deleteBatch(){//将下面的复选框的id值传递给Controller层,组成id数组,拼接url到controller层,调用批量删除方法(deleteBatch())方法
    var ids = $.makeArray($("input[name='id']:checked"));//通过$.makeArray将id放在数组中
    var url = '<%basePath%>/web/goodsList/deleteBatch';//此url指向controller层的deleteBatch方法,需要id属性
    var flag = true;
    for(var i in ids){//遍历数组
      if(i == 0){
          url += "?id=" + ids[i].value;//第一个id属性前加?拼接
          flag = false;
        } else {
          url += "&id=" + ids[i].value;//后面的id属性前加&拼接
          flag = false;
        }
      }
    if(flag){//如果没有选中商品
      alert("请选中商品!");
      return;
    }
    if(confirm("确定删除记录吗?")){
      window.location.href = url;//把拼接好的id数组传给页面
    }
    }
</script>

二、在jsp页面中对应的列表:

1、列表中要给表头中的复选框(第一个复选框)设置name名,并调用chgAll(this)方法来实现全选或全不选;

2、table中的复选框设置name名,并调用chg()方法来实现上面的第二个功能;

3、form表单提交时调用deleteBatch()方法

<body>
  <form:form id="uuForm" modelAttribute="goods"  action="<%basePath%>/web/goodsList/" method="post" >//form表单提交时调用deleteBatch()方法
    <div> <input type="button"  onclick="deleteBatch()" value="批量删除" /> </div>
  </form:form>
  <sys:message content="${message}" />
  <table id="cTable" >
    <thead>
      <tr>
      <th><input type="checkbox" name="ids" onchange="chgAll(this)" /></th>//调用chgAll(this)方法来实现全选或全不选,此处的this指所有复选框对象
        <th>商品编号</th>
        <th>商品标题</th>
      </tr>
    </thead>
    <tbody>
      <c:forEach items="${goods}" var="goods" varStatus="status">
        <tr>
        <td><input type="checkbox" name="id" value="${goods.goodsId }" onchange="chg()"/></td>//调用chg()方法
          <td>${webGoodsInfo.goodsNo}</td>
          <td>${webGoodsInfo.goodsTitle}</td>
        </tr>
      </c:forEach>
    </tbody>
  </table>
   
</body>

三、看下spring MCV中的controller代码

@RequestMapping("deleteBatch")//对应jsp页面中的deleteBatch()请求
  public String deleteBatch(Long[] id, RedirectAttributes redirectAttributes){//此处的id为页面中的id值,必须保持一直!!!!
    if(id !=null&&id.length!=0){
      goodsService.deleteBatch(id);
    }
    return "redirect:"+Global.getAdminPath()+"/web/webGoodsInfo/?repage";//重定向到列表页面
  }
}

看下效果:

jQuery+SpringMVC中的复选框选择与传值实例

以上这篇jQuery+SpringMVC中的复选框选择与传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
jQuery中库的引用方法
Jan 06 #jQuery
jQuery封装animate.css的实例
Jan 04 #jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
vue实现通讯录功能
2018/07/14 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
python实现二分查找算法
2017/09/21 Python
python实现黑客字幕雨效果
2018/06/21 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
Python实现异步IO的示例
2020/11/05 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
ktv好的活动方案
2014/08/15 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
合理化建议书
2015/02/04 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
礼仪培训心得体会
2016/01/22 职场文书