checkbox选课（限选5个，之后不能选择，取消后才可以选）

最新推荐文章于 2023-11-02 13:31:05 发布

原创最新推荐文章于 2023-11-02 13:31:05 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #import #string #path #html #border

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个基于Java的选课系统的实现细节，包括页面布局、动态数据展示及客户端脚本交互等内容。该系统能够根据用户的选择动态更新课程选择状态，并限制学生最多选择五门课程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@page import="com.neusoft.enetity.Course"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
           + request.getServerName() + ":" + request.getServerPort()
           + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <base href="<%=basePath%>">

       <title>选课</title>

       <meta http-equiv="pragma" content="no-cache">
       <meta http-equiv="cache-control" content="no-cache">
       <meta http-equiv="expires" content="0">
       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       <meta http-equiv="description" content="This is my page">
       

<script type="text/javascript">
<%
                   ArrayList<Course> wx_al = new ArrayList<Course>();
                   wx_al = (ArrayList<Course>) request.getAttribute("wx_al");
%>
var arr = new Array();
var count = 0;//需要传过来的值
function check(obj) {
if(count>0&&count<=5){
for(var i=0;i<arr.length;i++){
       if(arr[i]==obj){
       alert("您选择了:"+arr[i]);
       alert("一共有"+count+"元素");
       arr.splice(i,1);
       count--;
       break;
           }
       else if(i==arr.length-1){
           alert("插入数组");
           arr.push(obj);
           count++;
       break;
       }
           }

       if(count==5){
       alert("选课结束");
       var checkbox = document.getElementsByName("xk");
           for(var j=0;j<<%=wx_al.size()%>;j++){
               if(!checkbox[j].checked){
               checkbox[j].disabled=true;
                       }
                   }
               }
           else{
               var checkbox = document.getElementsByName("xk");
                   for(var j=0;j<<%=wx_al.size()%>;j++){
                       if(!checkbox[j].checked){
                           checkbox[j].disabled=false;
                       }
                   }
           }
       }
   else{
       arr.push(obj);
       count++;
   }
   alert("数组中所有元素为："+arr+"\n");
   alert("数组长度为："+arr.length);
}
</script>
   </head>

   <body>
       <center>
           <table border="1"
               style="border-collapse: collapse; text-align: center" width="90%">
               <tr>
                   <td>
                       选课
                       <td>
                           课程号
                       </td>
                   <td>
                       课程名称
                   </td>
                   <td>
                       主讲教师
                   </td>
                   <td>
                       计划人数
                   </td>
                   <td>
                       已选人数
                   </td>
               </tr>
               <%

                   if (wx_al.size() == 0) {
                       out.println("没有显示的数据");
                   } else {
                       for (int i = 0; i < wx_al.size(); i++) {
                           System.out.println("shuchu");
                           out.println("<tr>");
                           out.println("<td><input type='checkbox' name='xk' id="
                                   + wx_al.get(i).getKch() + " onclick='check("
                                   + wx_al.get(i).getKch() + ")'></td>");
                           out.println("<td>" + wx_al.get(i).getKch() + "</td>");
                           out.println("<td>" + wx_al.get(i).getKcmc() + "</td>");
                           out.println("<td>" + wx_al.get(i).getZjjs() + "</td>");
                           out.println("<td>" + wx_al.get(i).getJhrs() + "</td>");
                           out.println("<td>" + wx_al.get(i).getYsrs() + "</td>");
                           out.println("</tr>");
                       }
                   }
               %>
           </table>
       </center>
   </body>
</html>