在电台检查中显示/隐藏表格

时间：2018-05-01 05:14:57

标签： javascript html css radio-button

我试图展示＆＃34;个人＆＃34;形成并隐藏父母＆＃34;当＆＃34;个人＆＃34;检查收音机，并显示＆＃34;父母＆＃34;形成并隐藏＆＃34;个人＆＃34;检查父无线电时的表格。我的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";
    }
}

2 个答案:

答案 0 :(得分：0)

由于默认选择了某个单选按钮，因此您必须在页面加载时调用或调用radioCheck()。此外，请不要忘记关闭所有input元素。

＆＃13;
＆＃13; 
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()
＆＃13; 
<!-- 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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

但是有问题的代码对我来说没有任何改变是正常的：

<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>
相关问题
最新问题