JSP介面全選刪除
阿新 • • 發佈：2019-02-13
一開始做全選功能的時候，一片茫然，參考別人的程式碼，發現可以在jsp中實現全選，並且資料的獲取和傳送，非常不錯，分享一下，這是最後的功能截圖：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib uri="/struts-tags" prefix="s"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'logisticsCompany.jsp' starting page</title> <script src="js/jquery.js"></script> <script type="text/javascript"> // 全選 function allCheck() { var chkList = document.getElementsByName("chkID"); if (document.getElementById("chkAll").checked) { for (var i = 0; i < chkList.length; i++) { chkList[i].checked = true; } }else { for(var i = 0; i < chkList.length; i++) { chkList[i].checked = false; } } } //儲存 function save(){ var str = ""; var chkList = document.getElementsByName("chkID"); for (var i = 0; i < chkList.length; i++) { if (chkList[i].checked) { str+=chkList[i].value+","; } } $("#str").val(str); //document.getElementById("str").value=str; //$("#myform").submit(); document.forms[0].action="logisticsCompanyAction_addLogisticsCompany" document.forms[0].submit(); } //初始化頁面時，是否選中該checkbox function isCheck(){ var chkList=document.getElementsByName("chkID"); var chkedList = document.getElementsByName("chkedID"); for(var i=0;i<chkedList.length;i++){ $("input:checkbox[value='"+chkedList[i].value+"']").attr('checked','true'); } } </script> </head> <body class="skin-blue" style="min-height: 500px;" onload="isCheck();"> <aside class="right-side"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> 物流公司 </h1> <ol class="breadcrumb breadcrumb-primary"></ol> </section> <div class="form-group"> <label class="col-sm-2 control-label"> 選擇物流： </label> <a href="logisticsCompanyAction_addLogisticsCompany"></a> <form action="logisticsCompanyAction_addLogisticsCompany" method="post" id="myform"> <div class="col-sm-10"> <ul class="list-unstyled"> <li> <label class="checkbox-inline"> <input id="chkAll" class="check-all" type="checkbox" onclick="allCheck();"> 全選 </label> </li> <li> <s:iterator value="logisticsCompanyDto"> <input type="checkbox" name="chkID" id="checkID" value="<s:property value="corpId"/>"> <s:property value="corpName"/> </s:iterator> </li> </ul> <ul id="ul_logisticsCompany" style="display:none"> <s:iterator value="logisticsCompany"> <input type="checkbox" name="chkedID" id="checkedID" value="<s:property value="corpComId"/>"> </s:iterator> </ul> </div> <ul> <button type="button" onclick="save()"> 儲存 </button> </ul> <input type="hidden" id="str" name="str" value="" /> </form> </div> </body> </html>