Показать / Скрыть форму на радио проверке

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

Да, я согласен, сначала вы должны закрыть все входные теги.

Но указанный код работает нормально для меня без каких-либо изменений:

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

}
</script>
<!-- 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()"  />
            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" style="display:none">
        <!-- 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" style="display:none">
        <!-- 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>

Answer 2

Так как одна из ваших радиокнопок выбрана по умолчанию, вы должны позвонить или вызвать 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>