javascript - 在 radio 检查中显示/隐藏表格

Question

我试图在选中“个人”单选按钮时显示“个人”表单并隐藏“父”表单，并在选中父单选按钮时显示“父”表单并隐藏“个人”表单。我的 JavaScript 函数似乎无法正常工作，有什么问题吗？

HTML:

<!-- Radio check 1 -->
    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked>
            Individual
        </label>
    </div>

    <!-- Radio check 2 -->

    <div class="form-check form-check-inline">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()">
            Parent of a child
        </label>
    </div>

    <!-- Form for individual -->
    <form id="individual">
        <!-- Individual's first name box -->
        <div class="form-group row">
            <input class="form-control" type="text" placeholder="First name">
        </div>

        <!-- Individual's last name box -->
        <div class="form-group row">
            <input class="form-control" type="text" placeholder="Last name">
        </div>

        <!-- Email box -->
        <div class="form-group row">
            <input class="form-control" type="email" placeholder="Email">
        </div>

        <!-- Password box -->
        <div class="form-group row">
            <input class="form-control" type="password" placeholder="Password">
        </div>

        <!-- Individual's birthday --> 
        <label>Birthday</label>
        <select name="month" onChange="changeDate(this.options[selectedIndex].value);">
            <option value="na">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
            </select>
            <select name="day" id="day">
            <option value="na">Day</option>
            </select>
            <select name="year" id="year">
            <option value="na">Year</option>
         </select>

        <!-- Create account button -->
        <button></button>
    </form>

    <!--Form for child-->
    <form id="parent" class="hidden">
        <!-- Parent's first name box -->
        <div class="form-group row">
            <input class="form-control" type="text" placeholder="Parent's first name">
        </div>

        <!-- Parent's last name box -->
        <div class="form-group row">
            <input class="form-control" type="text" placeholder="Parent's last name">
        </div>

        <!-- Email box -->
        <div class="form-group row">
            <input class="form-control" type="email" placeholder="Email">
        </div>

        <!-- Password box -->
        <div class="form-group row">
            <input class="form-control" type="password" placeholder="Password">
        </div>

        <!-- Child's first name box -->
        <div class="form-group row">
            <input class="form-control" type="text" placeholder="Child's first name">
        </div>

        <!-- Child's birthday -->
        <label>Child's Birthday</label>
        <select name="month" onChange="changeDate(this.options[selectedIndex].value);">
            <option value="na">Month</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
            </select>
            <select name="day" id="day">
            <option value="na">Day</option>
            </select>
            <select name="year" id="year">
            <option value="na">Year</option>
        </select>
        <!-- Create account button -->
        <button></button>
    </form>

CSS:

#individual {
    display: block;
}

#parent {
    display: none;
}

JavaScript:

function radioCheck() {
    var radio1 = document.getElementById("radio1");
    var radio2 = document.getElementById("radio2");
    var individual = document.getElementById("individual");
    var parent = document.getElementById("parent");
    if (radio2.checked == true){
        individual.style.display = "none";
        parent.style.display = "block";
    } 
    else {
        individual.style.display = "block";
        parent.style.display = "none";
    }
}

Answer 1

由于您的单选按钮之一在默认情况下处于选中状态，因此您必须在页面加载时调用或调用 radioCheck()。并且不要忘记关闭所有的 input 元素。

function radioCheck() {
    var radio1 = document.getElementById("radio1");
    var radio2 = document.getElementById("radio2");
    var individual = document.getElementById("individual");
    var parent = document.getElementById("parent");
    if (radio2.checked == true){
        individual.style.display = "none";
        parent.style.display = "block";
    } 
    else {
        individual.style.display = "block";
        parent.style.display = "none";
    }
}
radioCheck()

<!-- Radio check 1 -->
<div class="form-check form-check-inline">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked/>
        Individual
    </label>
</div>

<!-- Radio check 2 -->

<div class="form-check form-check-inline">
    <label class="form-check-label">
        <input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"/>
        Parent of a child
    </label>
</div>

<!-- Form for individual -->
<form id="individual">
    <!-- Individual's first name box -->
    <div class="form-group row">
        <input class="form-control" type="text" placeholder="First name"/>
    </div>

    <!-- Individual's last name box -->
    <div class="form-group row">
        <input class="form-control" type="text" placeholder="Last name"/>
    </div>

    <!-- Email box -->
    <div class="form-group row">
        <input class="form-control" type="email" placeholder="Email"/>
    </div>

    <!-- Password box -->
    <div class="form-group row">
        <input class="form-control" type="password" placeholder="Password"/>
    </div>

    <!-- Individual's birthday --> 
    <label>Birthday</label>
    <select name="month" onChange="changeDate(this.options[selectedIndex].value);">
        <option value="na">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
        </select>
        <select name="day" id="day">
        <option value="na">Day</option>
        </select>
        <select name="year" id="year">
        <option value="na">Year</option>
     </select>

    <!-- Create account button -->
    <button></button>
</form>

<!--Form for child-->
<form id="parent" class="hidden">
    <!-- Parent's first name box -->
    <div class="form-group row">
        <input class="form-control" type="text" placeholder="Parent's first name"/>
    </div>

    <!-- Parent's last name box -->
    <div class="form-group row">
        <input class="form-control" type="text" placeholder="Parent's last name"/>
    </div>

    <!-- Email box -->
    <div class="form-group row">
        <input class="form-control" type="email" placeholder="Email"/>
    </div>

    <!-- Password box -->
    <div class="form-group row">
        <input class="form-control" type="password" placeholder="Password"/>
    </div>

    <!-- Child's first name box -->
    <div class="form-group row">
        <input class="form-control" type="text" placeholder="Child's first name"/>
    </div>

    <!-- Child's birthday -->
    <label>Child's Birthday</label>
    <select name="month" onChange="changeDate(this.options[selectedIndex].value);">
        <option value="na">Month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
        </select>
        <select name="day" id="day">
        <option value="na">Day</option>
        </select>
        <select name="year" id="year">
        <option value="na">Year</option>
    </select>
    <!-- Create account button -->
    <button></button>
</form>