当前位置: 移动技术网 > IT编程>开发语言>JavaScript > jQuery+SpringMVC中的复选框选择与传值实例

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

2018年01月31日  | 移动技术网IT编程  | 我要评论

一、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中的复选框选择与传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网