想要单选按钮 onClick YES 选项显示第一个 div“#current_school_details”，没有选项显示第二个 div“#current_school_details_two”

Question

为大代码道歉，我还是个新手，我之前正在研究这个，当您选择“是”时，我帮助我处理的初始 javascript 代码用于显示第一个 div 的内容，我天真地认为如果我复制了它，它会为 NO 工作，嗯......确实如此，但两者都同时显示。
如何编写代码，以便当我单击“是”时它显示（#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/bootstrap@5.1.0/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>

Answer 1

为了代码清晰起见，我将 (current_school_details) 引用重命名为 (current_school_details_one)，但这有效：

main.js

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;
    } 
}

index.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 调用搜索类，而是将其切换为直接查找输入。

Answer 2

据我了解，您只希望根据选择显示其中一个 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>