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导航条固定定位效果实例代码
May 26 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
python fabric使用笔记
2015/05/09 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python中的随机函数random的用法示例
2018/01/27 Python
Django视图扩展类知识点详解
2019/10/25 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
法律进社区实施方案
2014/03/21 职场文书
学校春季防火方案
2014/06/08 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
超市创业计划书
2014/09/15 职场文书
学雷锋日活动总结
2015/02/06 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis