не удалось показать / скрыть другие поля при установке флажка с помощью jquery - PullRequest
Новая
       1

не удалось показать / скрыть другие поля при установке флажка с помощью jquery

0 голосов
/ 28 января 2020

Я пытаюсь показать и скрыть текстовые поля ниже флажка (от уровня документа до статуса, который я хочу скрыть и показать) на основе выбора ввода флажка. но он скрывает только текст, а не границу таблицы. Подскажите пожалуйста, где я ошибаюсь? Я использовал табличный тег в теге формы. Когда я запускаю индекс. jsp, тогда поля ниже флажка (Уровень документа в статусе) должны быть скрыты.

Это индекс. jsp page 

<%@page import="java.util.Properties" %>

  <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>

    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Document Management System</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <style>
        h2 {
          text-shadow: 2px 2px 5px red;
        }
        
        #Registercontainer {
          max-width: 600px;
          min-width: 320px;
          width: 100%;
          margin: 70px auto;
          border: 2px solid blue;
          border-style: inset;
          border-radius: 8px;
          background-color: aliceblue;
          top: 0;
          padding: 15px;
        }
        
        #back_form {
          justify-content: center;
        }
        
        .right {
          text-align: right;
          float: right;
        }
        
        #wgtmsr {
          width: 153px;
        }
        
        .hidden {
          display: none;
        }
      </style>
      <script type="text/javascript">
        function showHide() {
          var checkbox = document.getElementById("chk");
          var hiddeninputs = document.getElementsByClassName("hidden");

          for (var i = 0; i != hiddeninputs.length; i++) {
            if (checkbox.checked) {
              hiddeninputs[i].style.display = "block";
            } else {
              hiddeninputs[i].style.display = "none";
            }
          }
        }
      </script>

    </head>

    <body>




      <br><br><br><br>

      <div id="Registercontainer">
        <div class="RegForm">
          <div id="back_glob">
            <div id="back_form">
              <form action="UploadServletClass" method="post" enctype="multipart/form-data">

                <center>
                  <h2>Upload a New Document</h2>
                </center>

                <table width="400px" align="center" border="2">
                  <tr>
                    <td align="center" colspan="2">Form Details</td>
                  </tr>
                  <tr>
                    <td>Z id</td>
                    <td>
                      <input type="text" required="" name="zid" />
                    </td>
                  </tr>
                  <tr>
                    <td>First Name</td>
                    <td>
                      <input list="firstnamelist" required="" name="firstname" />
                      <datalist id="firstnamelist">
                            <option value="Anjali">Anjali</option>
                            <option value="Mukund">Mukund</option>
                            <option value="Pradyumna">Pradyumna</option>
                            <option value="Santosh">Santosh</option>
                            <option value="Arun">Arun</option>
                            <option value="Ramesh">Ramesh</option>	
                            <option value="Nachiket">Nachiket</option>	
                            <option value="Rajendra">Rajendra</option>
                           
                    </datalist>
                    </td>
                  </tr>

                  <tr>
                    <td>Last Name</td>
                    <td>
                      <input list="lastnamelist" required="" name="lastname" />
                      <datalist id="lastnamelist">
                                <option value="Gadkar">
                                <option value="Kale">
                                <option value="Kulkarni">
                                <option value="Shinde">
                       </datalist>


                    </td>
                  </tr>
                  <tr>
                    <td>Mail id</td>
                    <td>
                      <input type="email" required="" name="mailid" />
                    </td>
                  </tr>
                  <tr>
                    <td>Division</td>
                    <td>
                      <select name="division" id="wgtmsr">
                        <option value=""></option>
                        <option value="B">B</option>
                        <option value="Z">Z</option>
                        <option value="I">I</option>
                        <option value="CF">CF</option>
                        <option value="P">P</option>


                      </select>
                    </td>
                  </tr>

                  <tr>
                    <td>Department</td>
                    <td>
                      <select name="department" id="wgtmsr">
                        <option value=""></option>
                        <option value="IT">IT</option>
                        <option value="Finance">Finance</option>
                        <option value="Logistics">Logistics</option>
                        <option value="Design">Design</option>


                      </select>
                    </td>
                  </tr>

                  <tr>
                    <td>Cost Center Code</td>
                    <td>
                      <select name="costcentercode" id="wgtmsr">
                        <option value=""></option>
                        <option value="000">000</option>
                        <option value="111">111</option>
                        <option value="121">121</option>
                        <option value="222">222</option>
                        <option value="222">222</option>
                        <option value="222">222</option>
                        <option value="222">222</option>
                        <option value="222">222</option>
                        <option value="222">222</option>

                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>Document Number</td>
                    <td>
                      <input type="text" required="" name="documentnumber" />
                    </td>
                  </tr>

                  <tr>
                    <td>Document Name</td>
                    <td>
                      <input type="text" required="" name="documentname" />
                    </td>
                  </tr>

                  <tr>
                    <td>Document Type</td>
                    <td>
                      <select name="Document_Type" id="wgtmsr">
                        <option value=""></option>
                        <option value="Agreement">Agreement</option>
                        <option value="Contract">Contract</option>
                        <option value="PO">PO</option>
                        <option value="Invoice">Invoice</option>
                        <option value="COA">COA</option>
                        <option value="Lease Deed">Lease Deed</option>
                        <option value="AMC">AMC</option>
                        <option value="Direct Material">Direct Material</option>
                        <option value="Indirect Material/Services">Indirect Material/Services</option>

                      </select>
                    </td>
                  </tr>
                  <br><br>
                  <tr>
                    <td>Document Category</td>
                    <td>
                      <select name="Document_Category" id="wgtmsr">
                        <option value=""></option>
                        <option value="Customer">Customer</option>
                        <option value="Vendor">Vendor</option>
                        <option value="Internal">Internal</option>

                      </select>
                    </td>

                  </tr>
                  <tr>
                    <td>Document Classification</td>
                    <td>
                      <select name="Document_Classification" id="wgtmsr">
                        <option value=""></option>
                        <option value="Public">Public</option>
                        <option value="Team">Team</option>
                        <option value="User">User</option>

                      </select>
                    </td>

                  </tr>
                  <br><br>



                  <tr>
                    <td>Modifier</td>
                    <td>
                      <input type="text" required="" name="modifier" />
                    </td>
                  </tr>

                  <tr>
                    <td>Authorised By</td>
                    <td>
                      <input type="text" required="" name="authorisedby" />
                    </td>
                  </tr>

                  <tr>
                    <td>From date</td>
                    <td>
                      <input type="date" required="" name="fromdate" />
                    </td>
                  </tr>
                  <tr>
                    <td>To Date</td>
                    <td>
                      <input type="date" required="" name="todate" />
                    </td>
                  </tr>



                  <!–– Code for QMS start   ––>

                  <tr>
                    <td><label for="chk">QMS</label></td>
                    <td>
                      <input type="checkbox" name="chk" id="chk" value="check" onclick="showHide()" />

                    </td>
                  </tr>

                  <tr>
                    <td><label class="hidden">Document Level</label></td>
                    <td>

                      <select name="documentlevel" class="hidden" id="wgtmsr">
                        <option value=""></option>
                        <option value="Public">Public</option>
                        <option value="Team">Team</option>
                        <option value="User">User</option>
                      </select>
                    </td>
                  </tr>

                  <tr>
                    <td><label class="hidden">Document 00 General</label></td>
                    <td>

                      <select name="document00general" class="hidden" id="wgtmsr">
                        <option value=""></option>
                        <option value="Public">Public</option>
                        <option value="Team">Team</option>
                        <option value="User">User</option>
                      </select>
                    </td>
                  </tr>

                  <tr>
                    <td><label class="hidden">Serial Number</label></td>
                    <td>
                      <input type="text" name="serialnumber" class="hidden" />
                    </td>
                  </tr>

                  <tr>
                    <td><label class="hidden">Revision No.</label></td>
                    <td>

                      <select name="rivisionnumber" class="hidden" id="wgtmsr">
                        <option value=""></option>
                        <option value="Public">Public</option>
                        <option value="Team">Team</option>
                        <option value="User">User</option>
                      </select>
                    </td>
                  </tr>



                  <tr>
                    <td><label class="hidden">Issuer</label></td>
                    <td>
                      <input type="text" name="issuer" class="hidden" />
                    </td>
                  </tr>

                  <tr>
                    <td><label class="hidden">Status</label></td>
                    <td>

                      <select name="status" class="hidden" id="wgtmsr">
                        <option value=""></option>
                        <option value="Public">Public</option>
                        <option value="Team">Team</option>
                        <option value="User">User</option>
                      </select>
                    </td>
                  </tr>


                  <!–– Code for QMS end   ––>




                  <tr>
                    <td>Select File</td>
                    <td>
                      <input type="file" name="fileName" multiple="multiple" />
                    </td>
                  </tr>


                  <tr>
                    <td></td>
                    <td>
                      <input type="submit" value="Submit" name="Submit" />
                    </td>
                  </tr>
                </table>
              </form>

              <br>
              <center><a href="filelist.jsp">View List</a></center>
            </div>
          </div>
        </div>
      </div>
    </body>

    </html>

1 Ответ

0 голосов
/ 28 января 2020

Я не нашел проблему в вашем коде. Я просто использовал ваш код и создал скрипку, и похоже, что она работает нормально. Пожалуйста, дайте мне знать, если у вас есть какие-либо другие проблемы. 

function showHide() {
    var checkbox = document.getElementById("chk");
    var hiddeninputs = document.getElementsByClassName("hidden");

    for (var i = 0; i != hiddeninputs.length; i++) {
      if (checkbox.checked) {
        hiddeninputs[i].style.display = "block";
      } else {
        hiddeninputs[i].style.display = "none";
      }
    }
  }
.right {
    text - align: right;
    float: right;
  }
  
  #wgtmsr {
  width: 153 px;
}

.hidden {
  display: none;
}
<tr>
  <td><label for="chk">QMS</label></td>
  <td>
    <input type="checkbox" name="chk" id="chk" value="check" onclick="showHide()" />

  </td>
</tr>

<tr>
  <td><label class="hidden">Document Level</label></td>
  <td>

    <select name="documentlevel" class="hidden" id="wgtmsr">
      <option value=""></option>
      <option value="Public">Public</option>
      <option value="Team">Team</option>
      <option value="User">User</option>
    </select>
  </td>
</tr>

<tr>
  <td><label class="hidden">Document 00 General</label></td>
  <td>

    <select name="document00general" class="hidden" id="wgtmsr">
      <option value=""></option>
      <option value="Public">Public</option>
      <option value="Team">Team</option>
      <option value="User">User</option>
    </select>
  </td>
</tr>

<tr>
  <td><label class="hidden">Serial Number</label></td>
  <td>
    <input type="text" name="serialnumber" class="hidden" />
  </td>
</tr>

<tr>
  <td><label class="hidden">Revision No.</label></td>
  <td>

    <select name="rivisionnumber" class="hidden" id="wgtmsr">
      <option value=""></option>
      <option value="Public">Public</option>
      <option value="Team">Team</option>
      <option value="User">User</option>
    </select>
  </td>
</tr>



<tr>
  <td><label class="hidden">Issuer</label></td>
  <td>
    <input type="text" name="issuer" class="hidden" />
  </td>
</tr>

<tr>
  <td><label class="hidden">Status</label></td>
  <td>

    <select name="status" class="hidden" id="wgtmsr">
      <option value=""></option>
      <option value="Public">Public</option>
      <option value="Team">Team</option>
      <option value="User">User</option>
    </select>
  </td>
</tr>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...