代码之家  ›  专栏  ›  技术社区  ›  Raju Choubey

如何确保多组单选按钮在HTML中不会相互取消选择?[已关闭]

  •  -5
  • Raju Choubey  · 技术社区  · 6 年前

    我面临一个问题,在查看页面上显示问题和选项,并将结果提交到结果页面,检查结果是否正确。代码如下所示。

    问题是单选按钮只允许选中一个。请参见下面的屏幕截图。我怎样才能解决这个问题?

    Exam process

    [TakeExam.jsp]

    <form  method="post"  action="Examprocess" class="form-horizontal">
       <div class="form-group">
         <label class="control-label col-sm-1" style="color: white"> Subject:</label>    
             <div class="col-sm-3">
             <select class="form-control" name="sub">
             <option>Select your choice</option>
            <option>cprog</option>
            <option>cpp</option>
            <option>html</option>
            <option>java</option>  
             </select>
             </div>
             </div>
        <div class="form-group">   
             <div class="col-sm-offset-2 col-sm-10">
           <input style="color:red" type="submit"  value="start exam" />
           </div>
           </div>
      </form>
    

    [Examprocess(Servlet)]

    package exam.controller;
    
    import java.io.IOException;
    
    import javax.servlet.RequestDispatcher;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    import exam.DAO.CTest;
    
    
    @WebServlet("/Examprocess")
    public class Examprocess extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        }
    
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            String subject = request.getParameter("sub");
            HttpSession session = request.getSession();
            session .setAttribute("Subject", subject);
            if(subject.equals("cprog")) {
    
                CTest ctest = new CTest();
                RequestDispatcher rd = request.getRequestDispatcher("view.jsp");
                request.setAttribute("examq", ctest.getdata());
                rd.forward(request, response);
    
                //response.sendRedirect("view.jsp");
            }
            else if(subject.equals("cpp")) {
    
                response.sendRedirect("view1.jsp");
    
            }
    
        }
    
    }
    

    [CTest.java]

    package exam.DAO;
    import java.sql.*;
    import java.util.ArrayList;
    
    import exam.DTO.ExamQ;
    import exam.utilities.ConnectionFac;
    
    public class CTest {
    
        Connection cn = null;
        PreparedStatement ps = null;
        Statement st = null;
        ResultSet rs = null;
        ConnectionFac con = new ConnectionFac();
        String selectctest ="select * from ctest";
    
        public ArrayList<ExamQ> getdata() {
    
            ArrayList<ExamQ> arr =new ArrayList<ExamQ>();
    
    
            try {
                rs=con.getResultSet(selectctest);
                while(rs.next()) {
                    ExamQ examques =new ExamQ();
                    examques.setQid(rs.getShort(1));
                    examques.setQuestion(rs.getString(2));
                    examques.setOption1(rs.getString(3));
                    examques.setOption2(rs.getString(4));
                    examques.setOption3(rs.getString(5));
                    examques.setOption4(rs.getString(6));
                    examques.setAnswer(rs.getString(7));
                    arr.add(examques);
    
                }
            } catch (SQLException e) {
    
                e.printStackTrace();
            }
            return arr;
        }
    
    
    
    }
    

    [ExamQ.java(getter和Setter)]

    package exam.DTO;
    
    public class ExamQ {
        int qid;
        String question;
        String option1;
        String option2;
        String option3;
        String option4;
        String answer;
    
        public int getQid() {
            return qid;
        }
        public void setQid(int qid) {
            this.qid = qid;
        }
        public String getQuestion() {
            return question;
        }
        public void setQuestion(String question) {
            this.question = question;
        }
        public String getOption1() {
            return option1;
        }
        public void setOption1(String option1) {
            this.option1 = option1;
        }
        public String getOption2() {
            return option2;
        }
        public void setOption2(String option2) {
            this.option2 = option2;
        }
        public String getOption3() {
            return option3;
        }
        public void setOption3(String option3) {
            this.option3 = option3;
        }
        public String getOption4() {
            return option4;
        }
        public void setOption4(String option4) {
            this.option4 = option4;
        }
        public String getAnswer() {
            return answer;
        }
        public void setAnswer(String answer) {
            this.answer = answer;
        }
    
        @Override
        public boolean equals(Object obj) {
            if (this == obj)
                return true;
            if (obj == null)
                return false;
            if (!(obj instanceof ExamQ))
                return false;
            ExamQ other = (ExamQ) obj;
            if (answer == null) {
                if (other.answer != null)
                    return false;
            } else if (!answer.equals(other.answer))
                return false;
            if (option1 == null) {
                if (other.option1 != null)
                    return false;
            } else if (!option1.equals(other.option1))
                return false;
            if (option2 == null) {
                if (other.option2 != null)
                    return false;
            } else if (!option2.equals(other.option2))
                return false;
            if (option3 == null) {
                if (other.option3 != null)
                    return false;
            } else if (!option3.equals(other.option3))
                return false;
            if (option4 == null) {
                if (other.option4 != null)
                    return false;
            } else if (!option4.equals(other.option4))
                return false;
            if (qid != other.qid)
                return false;
            if (question == null) {
                if (other.question != null)
                    return false;
            } else if (!question.equals(other.question))
                return false;
            return true;
        }
    }
    

    [视图.jsp]

    <div class="row">
       <div  class="col-sm-4" >
       </div>
      <div  class="col-sm-8" >
    
       <form method="post" action="result.jsp">
    
       <% int i=1; %>
    
    <c:forEach items="${examq}" var="examq" >
      <label style="color:white">Q<%=i %>:<c:out value="${examq.getQuestion() }"></c:out></label><br>
    
      <label style="color:white" for="O1">O1:<c:out value="${examq.getOption1() }"></c:out></label>
      <input type="radio" name="radio" value="${examq.getOption1() }"><br>
    
      <label style="color:white" for="O2">O2:<c:out value="${examq.getOption2() }"></c:out></label>
      <input type="radio" name="radio" value="${examq.getOption2() }" ><br>
    
      <label style="color:white" for="O3">O3:<c:out value="${examq.getOption3() }"></c:out></label>
      <input type="radio" name="radio" value="${examq.getOption3() }"><br>
    
      <label style="color:white" for="O4">O4:<c:out value="${examq.getOption3() }"></c:out></label>
      <input type="radio" name="radio" value="${examq.getOption3() }"><br>  
    
      <hr>         
        </c:forEach> 
    
    
        <input type="submit" value="submit">
    
     </form>
    
      <a href="takeexam.jsp">GoBack</a>
    
      </div>
      </div>
    
    1 回复  |  直到 6 年前
        1
  •  0
  •   halfer    6 年前

    问题是HTML表单中的无线组名称冲突。您正在对所有组使用以下内容:

    name="radio"
    

    您需要做的是为每个组使用不同的名称;在单词排序中,对单个组中的每个问题使用相同的名称。假设您的问题ID是整数,您可以执行以下操作:

    name="radio_${examq.getQid()}"
    

    这将确保每个群体独立于其他群体表现出互斥的选择特征。