在无线电检查中显示/隐藏表格答案

【问题标题】：Show/Hide Form on Radio Check在无线电检查中显示/隐藏表格
【发布时间】：2018-05-01 17:53:09
【问题描述】：

我试图在选中“个人”单选时显示“个人”表单并隐藏“父”表单，并在选中父单选时显示“父”表单并隐藏“个人”表单。我的 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";
    }
}

【问题讨论】：

首先你必须用/关闭所有输入标签<input/>
感谢您指出我的错误，我很感激并已修复它

标签： javascript html css radio-button

【解决方案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>

【讨论】：

【解决方案2】：

是的，我同意，首先你必须关闭所有输入标签。

但有问题的代码对我来说运行良好，无需任何更改：

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

【讨论】：