时间戳

首页 > 解决方案 > HTML如何根据另一个输入中的答案设置输入的值范围

javascript - HTML如何根据另一个输入中的答案设置输入的值范围

问题描述

在我的网络表格上，我有一个问题，询问出生日期和性别。

我想使用 Javascript 进行检查，以确保如果用户选择“男性”，他必须年满 18 岁且未满 55 岁。但如果他们选择“女性”，他们必须在 20 岁以上和 50 岁以下。

（我的 HTML 示例）我有：

<b>Gender: </b><br>
    <input type="radio" name="Gender" value="male" required>  Male
    <input type="radio" name="Gender" value="female" required>  Female
    <br><br>
    <b>Date of Birth: </b><br>
    <input type="date" name="dob" required >
    <br><br>

我该怎么做呢？

标签： javascripthtml

解决方案

由于没有任何有用的答案，这就是我最终自己做的事情：

function checkGender() {
var test = document.getElementById("male").checked;
document.getElementById("demo").innerHTML = test;
if (test == true) {
    ageMin = 18;
    ageMax = 55;
} else {
    ageMin = 20;
    ageMax = 50;
}
//The following are only used to test that the values work
document.getElementById("demo1").innerHTML = ageMin;
document.getElementById("demo2").innerHTML = ageMax;

var dateString = document.getElementById("doB").value;
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth()- birthDate.getMonth();
document.getElementById("demo3").innerHTML = dateString;
document.getElementById("demo4").innerHTML = today;


if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
}
document.getElementById("demo5").innerHTML = age;

if (age<ageMin || age>ageMax) {
     alert("Age is outside limits, please try again.");
     stop();
}   
}

HTML方面的事情：

<div class="form-row">
        <br>
    <legend class="col-form-label col-sm-1 col-sm-offset-1">Gender:</legend>
        <div class="col-sm-4">
            <div class="form-check">
                <input class="form-check-input" id="male" type="radio" 
  name="Gender" value="male" required checked name="gender">
                <label class="form-check-label" for="male">
                    Male
                </label>
            </div>
            <div class="form-check">        
                <input id="female" type="radio" name="Gender" value="female" required name="gender">
                <label class="form-check-label" for="female">
                    Female
                </label>
            </div>
        </div>
        <div class="col-sm-4">
            <label for="doB">Date of Birth:</label><br>
            <input id="doB" type="date" name="dob" required>
        </div>
    </div>

推荐阅读