希望單選按鈕onClickYES選項顯示第一個div"#current_school_details"并且沒有選項顯示第二個div"#current_school_det

為大代碼道歉，仍然是一個新手，我之前正在研究這個，最初的 javascript 代碼幫助我在你選擇是時顯示第一個 div 的內容，我天真地認為如果我復制它，它會作業不，嗯...確實如此，但兩者同時顯示。
如何撰寫代碼，以便當我單擊是時顯示 (#current_school_details)，當我單擊否時顯示 (#current_school_details_two) 并替換或隱藏是選項，而不是兩者都坐在那里。

function selectFunction() {
  var yes = document.getElementById("gridRadios1");
  var current_school_details = document.getElementById("current_school_details");
  if (document.querySelector(".form-check-input").checked === true) {
    current_school_details.style.display = "none";
  } else {
    current_school_details.style.display = "block";
  }
}

function selectFunctionTwo() {
  var no = document.getElementById("gridRadios2");
  var current_school_details_two = document.getElementById("current_school_details_two");
  if (document.querySelector(".form-check-input").checked === true) {
    current_school_details_two.style.display = "none";
  } else {
    current_school_details_two.style.display = "block";
  }
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
<div>
  <legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
  <div class="col-sm-10">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" onclick="javascript:selectFunction();">
      <label class="form-check-label" for="gridRadios1">  Yes </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" onclick="javascript:selectFunctionTwo();">
      <label class="form-check-label" for="gridRadios2"> No </label>
    </div>
  </div>
</div>
<div id="current_school_details">
  <h2>Current School Details</h2>
  <select class="form-control">
    <option>--select--</option>
    <option>Twyford CofE High School</option>
    <option>Ealing Fields High School</option>
    <option>William Perkin CofE High School</option>
  </select>
</div>

<br>

<div id="current_school_details_two">
  <h2>Current School Details</h2>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Current School*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">School Address*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Office Email*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">Current Head of Year*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
</div>
</fieldset>

uj5u.com熱心網友回復：

為了代碼的清晰性，我將 (current_school_details) 參考重命名為 (current_school_details_one)，但這有效：

主檔案

const current_school_details_one = document.getElementById("current_school_details_one");
const current_school_details_two = document.getElementById("current_school_details_two");

function selectFunctionYes() {

    if (document.querySelector('input[name="gridRadios1"]').checked === true) {
      current_school_details_one.style.display = "block";
      current_school_details_two.style.display = "none";
      document.querySelector('input[name="gridRadios2"]').checked = false;
    } 
  }



function selectFunctionNo() {

    if (document.querySelector('input[name="gridRadios2"]').checked === true) {
      current_school_details_two.style.display = "block";
      current_school_details_one.style.display = "none";
      document.querySelector('input[name="gridRadios1"]').checked = false;
    } 
}

索引.html

<fieldset>
    <div>
        <legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
        <div class="col-sm-10">
           <div class="form-check">
              <input class="form-check-input" type="radio" name="gridRadios1" id="gridRadios1"  value="option1" onclick="selectFunctionYes();">
              <label class="form-check-label" for="gridRadios1">
              Yes
              </label>
           </div>
           <div class="form-check">
              <input class="form-check-input" type="radio" name="gridRadios2" id="gridRadios2" value="option2" onclick="selectFunctionNo();">
              <label class="form-check-label" for="gridRadios2">
              No
              </label>
           </div>
        </div>
    </div>


    <div id="current_school_details_one">
        <h2>Current School Details</h2>
        <select class="form-control">
            <option>--select--</option>
            <option>Twyford CofE High School</option>
            <option>Ealing Fields High School</option>
            <option>William Perkin CofE High School</option>
        </select>
    </div>

    <br>

    <div id="current_school_details_two">
        <h2>Current School Details</h2>
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputCity">Current School*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
            <div class="form-group col-md-6">
                <label for="inputCity">School Address*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
            </div>
            <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputCity">Office Email*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
            <div class="form-group col-md-6">
                <label for="inputCity">Current Head of Year*</label>
                <input type="text" class="form-control" id="inputCity">
            </div>
        </div>
    </div>
</fieldset>

JavaScript 函式中發生的一些事情會相互抵消或不需要，例如var yes = document.getElementById("gridRadios1"); 另外，我沒有使用document.querySelector呼叫搜索類，而是將其切換為直接查找輸入。

uj5u.com熱心網友回復：

據我了解，您只希望根據選擇顯示 div 之一。如果沒有選擇，它們都應該不可見。不需要為單選按鈕撰寫兩個函式，一個就足夠了。并且您應該將 display none 添加到初始狀態的 div 中。

function selectFunction() {
  var current_school_details = document.getElementById("current_school_details");
  if (document.querySelector(".form-check-input").checked === true) {
    current_school_details.style.display = "none";
    current_school_details_two.style.display = "block";
  } else {
    current_school_details.style.display = "block";
    current_school_details_two.style.display = "none";
  }
}

<div>
  <legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
  <div class="col-sm-10">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" onclick="javascript:selectFunction();">
      <label class="form-check-label" for="gridRadios1">  Yes </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" onclick="javascript:selectFunction();">
      <label class="form-check-label" for="gridRadios2"> No </label>
    </div>
  </div>
</div>
<div id="current_school_details" style="display: none">
  <h2>Current School Details</h2>
  <select class="form-control">
    <option>--select--</option>
    <option>Twyford CofE High School</option>
    <option>Ealing Fields High School</option>
    <option>William Perkin CofE High School</option>
  </select>
</div>

<br>

<div id="current_school_details_two" style="display: none">
  <h2>Current School Details</h2>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Current School*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">School Address*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">Office Email*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-6">
      <label for="inputCity">Current Head of Year*</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
</div>

標籤：javascript html 形式

上一篇：yt-navigate-finish運行時如何獲得新的youtube標題？

下一篇：在R中使用負值的ggplot堆疊條形圖