Home > Developer > JavaScript
Check box selection and value passing instance in jQuery + SpringMVC, jqueryspringmvc
1. Select checkbox
In jQuery, two methods are used to select the checkbox:
$("#cb1").attr("checked","checked");$("#cb1").attr("checked",true);
The corresponding jQuery function mainly provides three functions:
1. If the first check box is selected or deselected, the following check boxes are all selected or deselected;
2. When all the current check boxes are selected, the first check box is selected. If one of the current check boxes is not selected, the first check box is deselected;
3. Pass the id value of the following check box to the Controller layer to form an id array, and then call the corresponding method (usually delete ).
<Script type = "text/javascript"> function chgAll (t) {// if the first check box is selected or deselected, all or all of the following check boxes are selected; $ ("input [name = 'id']"). attr ('checked', t. checked); // when all the check boxes in the input tag whose name is id are selected, select the first check box. If one of the current check boxes is not selected, the first check box is deselected. var ids = $. makeArray ($ ("input [name = 'id']"); for (var I in ids) {if (ids [I]. checked = false) {// if one of the check boxes is not selected, the first check box is not selected $ ("input [name = 'id']"). attr ('check Ed ', false); return ;}$ ("input [name = 'id']"). attr ('checked', true); // if all are selected, select the first check box} function deleteBatch () {// pass the id value of the following check box to the Controller layer to form an id array, splice the url to the controller layer, and call the var ebatch () method var ids = $. makeArray ($ ("input [name = 'id']: checked"); // use $. makeArray places the id in the array var url = '<% basePath %>/web/goodsList/deleteBatch'; // This url points to the deleteBatch method on the controller layer, id attribute var flag = true; for (var I in ids ){/ /Traverse the array if (I = 0) {url + = "? Id = "+ ids [I]. value; // Add before the first id attribute? Splicing flag = false;} else {url + = "& id =" + ids [I]. value; // Add & splice flag = false before the id attribute. }}if (flag) {// if no item is selected, alert ("Please select the item! "); Return;} if (confirm (" are you sure you want to delete the record? ") {Window. location. href = url; // send the spliced id array to the page.} </script>
2. list corresponding to the jsp page:
1. In the list, set the name for the check box (the first check box) in the header, and call the chgAll (this) method to select all or not;
2. Set the name of the check box in the table and call the chg () method to implement the second function;
3. Call the deleteBatch () method when submitting the form.
<Body> <form: form id = "uuForm" modelAttribute = "goods" action = "<% basePath %>/web/goodsList/" method = "post"> // call deleteBatch () method <div> <input type = "button" onclick = "deleteBatch ()" value = "batch Delete"/> </div> </form: form> <sys: message content = "$ {message}"/> <table id = "cTable"> <thead> <tr> <th> <input type = "checkbox" name = "ids" onchange = "chgAll (this) "/> </th> // call the chgAll (this) method to select all or not select all, this indicates the <th> product number </th> <th> product title </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> // call the chg () method <td >$ {webGoodsInfo. goodsNo} </td> <td >$ {webGoodsInfo. goodsTitle }</td> </tr> </c: forEach> </tbody> </table> </body>
3. Check the controller code in spring MCV.
@ RequestMapping ("deleteBatch") // The deleteBatch () Request public String deleteBatch (Long [] id, RedirectAttributes redirectAttributes) on the jsp page) {// The id here is the id value in the page, which must be kept forever !!!! If (id! = Null & id. length! = 0) {goodsService. deleteBatch (id);} return "redirect:" + Global. getAdminPath () + "/web/webGoodsInfo /? Repage "; // redirect to the List page }}
See the following results:
The check box selection and value transfer instance in jQuery + SpringMVC above is all the content shared by xiaobian. I hope you can give us a reference and support for the customer's house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
