我正在嘗試對HTML表單進行條件欄位，但無法執行并且需要知道如何實作

我試圖實作在用戶選擇單選選項時顯示欄位，如果他選擇其他選項，則必須顯示另一個文本框

讓我說清楚

從下面的代碼如果用戶選擇“chatanya school”選項，它應該顯示“輸入 EPN 號碼”并隱藏“學校名稱欄位”

如果用戶選擇其他，則必須顯示“輸入學校名稱”并隱藏“EPN 號碼”

我用來實作的代碼

<!--Single Line-->
<label>First Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine" value="" fieldType=1 maxlength="255" />
<!--Single Line-->
<label>Last Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine2" value="" fieldType=1 maxlength="255" />
<!--Date-->
<label>Date of Birth 
<em>*</em>
</label>
<input type="text" name="Date" value="" maxlength="25"/><label>dd-MMM-yyyy</label>
<!--Dropdown-->
<label>Class studying in school
<em>*</em>
</label>
<select name="Dropdown"><option selected="true" value="-Select-">-Select-</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="IX">IX</option>
</select>
<!--Single Line-->
<label>Parent/Guardian Name 
<em>*</em>
</label>
<input  type="text" name="SingleLine1" value="" fieldType=1 maxlength="255" />
<!--Email-->
<label>Email 
<em>*</em>
</label>
<input type="text" maxlength="255" name="Email" value="" fieldType=9 />
<!--Phone-->
<label>Phone
<em>*</em>
</label>
<input type="text" compname="PhoneNumber" name="PhoneNumber_countrycode" phoneFormat="isCountryCodeEnabled=false maxlength="20" value="" fieldType=11 id="international_PhoneNumber_countrycode" />
<label>Number</label>
<!--Dropdown-->
<label>Mode of Exam
</label>
<select name="Dropdown1"><option selected="true" value="-Select-">-Select-</option>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
</select>
<!--Dropdown-->
<label>Exam Dates
<em>*</em>
</label>
<select name="Dropdown2"><option selected="true" value="-Select-">-Select-</option>
<option value="Dec&#x20;4,&#x20;2021">Dec 4, 2021</option>
<option value="Dec&#x20;18,&#x20;2021">Dec 18, 2021</option>
<option value="Jan&#x20;22,&#x20;2022">Jan 22, 2022</option>
<option value="Jan&#x20;29,&#x20;2022">Jan 29, 2022</option>
</select>
<!--Radio-->
<label>School studying in
</label>
<input type="radio" id="Radio_1" name="Radio" value="chaitanya School">
<label name="Radio1" for="Radio_1" >Chaitanya&#x20;School</label>
<input type="radio" id="Radio_2" name="Radio" value="Other">
<label name="Radio2" for="Radio_2" >Other</label>
<!--Number-->
<label>EPN 
</label>
<input data-show-if="Radio1" data-hide-if="Radio2" type="text" name="Number" value="" maxlength="18"/>
<!--Single Line-->
<label>School Name 
</label>
<input data-show-if="Radio2" data-hide-if="Radio1"  type="text" name="SingleLine3" value=""  fieldType=1 maxlength="255" />
<button type="submit"><em>Submit</em></button></form>

uj5u.com熱心網友回復：

您可以使用CSS element1~element2 Selector和CSS Attribute Selectors：

<style>
[data-show-if] {
    display: none;
}

#Radio_1:checked ~ [data-show-if="Radio1"] {
    display: block;
}
#Radio_2:checked ~ [data-show-if="Radio2"] {
    display: block;
}
</style>

檢查下面的片段：

<style>
    [data-show-if] {
        display: none;
    }

    #Radio_1:checked ~ [data-show-if="Radio1"] {
        display: block;
    }
    #Radio_2:checked ~ [data-show-if="Radio2"] {
        display: block;
    }

</style>
<!--Single Line-->
<label>First Name of the student
    <em>*</em>
</label>
<input  type="text" name="SingleLine" value="" fieldType=1 maxlength="255" />
<!--Single Line-->
<label>Last Name of the student
    <em>*</em>
</label>
<input  type="text" name="SingleLine2" value="" fieldType=1 maxlength="255" />
<!--Date-->
<label>Date of Birth
    <em>*</em>
</label>
<input type="text" name="Date" value="" maxlength="25"/><label>dd-MMM-yyyy</label>
<!--Dropdown-->
<label>Class studying in school
    <em>*</em>
</label>
<select name="Dropdown"><option selected="true" value="-Select-">-Select-</option>
    <option value="V">V</option>
    <option value="VI">VI</option>
    <option value="VII">VII</option>
    <option value="VIII">VIII</option>
    <option value="IX">IX</option>
</select>
<!--Single Line-->
<label>Parent/Guardian Name
    <em>*</em>
</label>
<input  type="text" name="SingleLine1" value="" fieldType=1 maxlength="255" />
<!--Email-->
<label>Email
    <em>*</em>
</label>
<input type="text" maxlength="255" name="Email" value="" fieldType=9 />
<!--Phone-->
<label>Phone
    <em>*</em>
</label>
<input type="text" compname="PhoneNumber" name="PhoneNumber_countrycode" phoneFormat="isCountryCodeEnabled=false maxlength="20" value="" fieldType=11 id="international_PhoneNumber_countrycode" />
<label>Number</label>
<!--Dropdown-->
<label>Mode of Exam
</label>
<select name="Dropdown1"><option selected="true" value="-Select-">-Select-</option>
    <option value="Online">Online</option>
    <option value="Offline">Offline</option>
</select>
<!--Dropdown-->
<label>Exam Dates
    <em>*</em>
</label>
<select name="Dropdown2"><option selected="true" value="-Select-">-Select-</option>
    <option value="Dec&#x20;4,&#x20;2021">Dec 4, 2021</option>
    <option value="Dec&#x20;18,&#x20;2021">Dec 18, 2021</option>
    <option value="Jan&#x20;22,&#x20;2022">Jan 22, 2022</option>
    <option value="Jan&#x20;29,&#x20;2022">Jan 29, 2022</option>
</select>
<!--Radio-->
<label>School studying in
</label>
<input type="radio" id="Radio_1" name="Radio" value="chaitanya School">
<label name="Radio1" for="Radio_1" >Chaitanya&#x20;School</label>
<input type="radio" id="Radio_2" name="Radio" value="Other">
<label name="Radio2" for="Radio_2" >Other</label>
<!--Number-->
<label>EPN
</label>
<input data-show-if="Radio1" data-hide-if="Radio2" type="text" name="Number" value="" maxlength="18"/>
<!--Single Line-->
<label>School Name
</label>
<input data-show-if="Radio2" data-hide-if="Radio1"  type="text" name="SingleLine3" value=""  fieldType=1 maxlength="255" />
<button type="submit"><em>Submit</em></button></form>

uj5u.com熱心網友回復：

為了實作這一點，我使用 jquery 通過其 id 獲取復選框更改事件，并在另一個元素上執行顯示隱藏，這非常簡單。

  $("#Radio_1").change(function(){
     $("#shcoolName,#shlabel").hide();
    });

對于頁面加載，請選擇您必須使用的任何單選按鈕

$("#Radio_1").prop("checked", true).trigger("change");

檢查這個作業演示它更容易理解。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Radio_1").change(function(){
 $("#shcoolName,#shlabel").hide();
 $("#epn,#lblepn").show();
});
$("#Radio_2").change(function(){
 $("#shcoolName,#shlabel").show();
 $("#epn,#lblepn").hide();
});
$("#Radio_1").prop("checked", true).trigger("change");
});
</script>
</head>
<body>

 <!--Single Line-->
<label>First Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine" value="" fieldType=1 maxlength="255" />
<!--Single Line-->
<label>Last Name of the student 
<em>*</em>
</label>
<input  type="text" name="SingleLine2" value="" fieldType=1 maxlength="255" />
<!--Date-->
<label>Date of Birth 
<em>*</em>
</label>
<input type="text" name="Date" value="" maxlength="25"/><label>dd-MMM-yyyy</label>
<!--Dropdown-->
<label>Class studying in school
<em>*</em>
</label>
<select name="Dropdown"><option selected="true" value="-Select-">-Select-</option>
<option value="V">V</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
<option value="VIII">VIII</option>
<option value="IX">IX</option>
</select>
<!--Single Line-->
<label>Parent/Guardian Name 
<em>*</em>
</label>
<input  type="text" name="SingleLine1" value="" fieldType=1 maxlength="255" />
<!--Email-->
<label>Email 
<em>*</em>
</label>
<input type="text" maxlength="255" name="Email" value="" fieldType=9 />
<!--Phone-->
<label>Phone
<em>*</em>
</label>
<input type="text" compname="PhoneNumber" name="PhoneNumber_countrycode" phoneFormat="isCountryCodeEnabled=false maxlength="20" value="" fieldType=11 id="international_PhoneNumber_countrycode" />
<label>Number</label>
<!--Dropdown-->
<label>Mode of Exam
</label>
<select name="Dropdown1"><option selected="true" value="-Select-">-Select-</option>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
</select>
<!--Dropdown-->
<label>Exam Dates
<em>*</em>
</label>
<select name="Dropdown2"><option selected="true" value="-Select-">-Select-</option>
<option value="Dec&#x20;4,&#x20;2021">Dec 4, 2021</option>
<option value="Dec&#x20;18,&#x20;2021">Dec 18, 2021</option>
<option value="Jan&#x20;22,&#x20;2022">Jan 22, 2022</option>
<option value="Jan&#x20;29,&#x20;2022">Jan 29, 2022</option>
</select>
<!--Radio-->
<label>School studying in
</label>
<input type="radio" id="Radio_1" name="Radio" value="chaitanya School">
<label name="Radio1" for="Radio_1" >Chaitanya&#x20;School</label>
<input type="radio" id="Radio_2" name="Radio" value="Other">
<label name="Radio2" for="Radio_2" >Other</label>
<!--Number-->
<label id="lblepn">EPN 
</label>
<input data-show-if="Radio1" id="epn" data-hide-if="Radio2" type="text" name="Number" value="" maxlength="18"/>
<!--Single Line-->

<label id="shlabel">School Name 
</label>
<input data-show-if="Radio2" data-hide-if="Radio1" id="shcoolName" type="text" name="SingleLine3" value=""  fieldType=1 maxlength="255" />
 
<button type="submit"><em>Submit</em></button></form>

</body>
</html>

標籤：javascript html 查询 css

上一篇：從帶有條件的嵌套物件陣列中洗掉空值

下一篇：如何獲取動態物件鍵并使用它？