Checkbox selection and value passing examples in jQuery+SpringMVC

Checkbox selection and value passing examples in jQuery+SpringMVC_jquery

亚连

Release： 2018-06-12 20:18:20

Original

1936 people have browsed it

Below I will share with you an example of checkbox selection and value passing in jQuery SpringMVC. It has a good reference value and I hope it will be helpful to everyone.

1. Checkbox selection

In jQuery, there are two common ways to select a checkbox:

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

Copy after login

The corresponding jQuery function mainly completes three functions:

1. If the first check box is selected or unchecked, then the following check boxes will be all selected or unchecked. Select all;

2. When all the check boxes below are selected, the first check box is set to be selected. When one of the check boxes below is not selected, the first check box is selected. Uncheck each checkbox;

3. Pass the id value of the following checkbox to the Controller layer to form an id array, and then call the corresponding method (usually delete).

<script type="text/javascript">  function chgAll(t){//第一个复选框选中或取消选中，则下面的复选框为全选或取消全选；
    $("input[name=&#39;id&#39;]").attr(&#39;checked&#39;,t.checked);//改变name名为id的input标签内的复选框的checked属性
  }
  function chg(){//当下面的复选框全部选中时，则将第一个复选框设置为选中，当下面的复选框中有一个没有被选中时，则第一个复选框取消选中；
    var ids = $.makeArray($("input[name=&#39;id&#39;]"));
    for(var i in ids){
      if(ids[i].checked==false){//如果所有的复选框只要有一个未选中，则第一个复选框不会选中
        $("input[name=&#39;ids&#39;]").attr(&#39;checked&#39;, false);
        return;
      }
    }
    $("input[name=&#39;ids&#39;]").attr(&#39;checked&#39;, true);//全部选中的情况下，则第一个复选框选中
  }
  function deleteBatch(){//将下面的复选框的id值传递给Controller层，组成id数组，拼接url到controller层，调用批量删除方法（deleteBatch())方法
    var ids = $.makeArray($("input[name=&#39;id&#39;]:checked"));//通过$.makeArray将id放在数组中
    var url = &#39;<%basePath%>/web/goodsList/deleteBatch&#39;;//此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>

Copy after login

2. The corresponding list in the jsp page:

1. In the list, the check box in the header (No. (a check box) set the name, and call the chgAll(this) method to select all or none;

2. Set the name of the check box in the table, and call the chg() method To realize the second function above;

3. Call the deleteBatch() method when the form is submitted

<body>
  <form:form id="uuForm" modelAttribute="goods"  action="<%basePath%>/web/goodsList/" method="post" >//form表单提交时调用deleteBatch()方法
    <p> <input type="button"  onclick="deleteBatch()" value="批量删除" /> </p>
  </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>

Copy after login

3. Take a look at the controller code in spring MCV

@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";//重定向到列表页面
  }
}

Copy after login

Look at the effect:

Check box selection and transmission in jQuery SpringMVC above The value instance is all the content shared with you

How to implement multiple inheritance in JavaScript

How to implement it Webpack multi-entry file packaging configuration

Project component development in Vue (detailed tutorial)

The above is the detailed content of Checkbox selection and value passing examples in jQuery+SpringMVC_jquery. For more information, please follow other related articles on the PHP Chinese website!