如果我选择了一个特定的单选按钮，如何在表单中添加新字段 - How to add new fields in my form if i select a specific radio button?

How to add new fields in my form if i select a specific radio button?

我想制作一个表格，其中有用于性别的单选按钮选择。现在有两个单选按钮"男"answers"女"。

当任何用户选择FEMALE时，会出现一个新的单选按钮（选项仅适用于FEMALE），询问她是否是父母的独生子女，然后提交按钮？？

但当用户选择性别男性时，则不会出现任何选项（此选项仅适用于女性）。。只有提交按钮在那里。。

现在该怎么做？？我不知道，所以我没有添加代码。。

如果有任何使用其他语言的建议。请告诉我…

我已经使用jQuery完成了这项工作。这是完整的代码：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
    $(".text").hide();
    $("#r1").click(function () {
        $(".text").show();
    });
    $("#r2").click(function () {
        $(".text").hide();
    });
});
</script>
<form action="">
<input type="radio" name="gender" id="r1" value="female" onClick="getResults()">Female&nbsp;
<input type="radio" name="gender" id="r2" value="male">Male
<div class="text">
<br>Are you the only child?<br>
<input type="radio" name="only" value="yes" onClick="getResults()">Yes&nbsp;
<input type="radio" name="only" value="no">No
</div>
<br><br><input type="submit" value="Submit">
</form>

<script type="text/javascript">
function maleFemaleCheck() {
    if (document.getElementById('maleCheck').checked) {
        // hide other element
    }
    else {
        // show other element
    }
}
</script>
<input type="radio" onclick="javascript:maleFemaleCheck();" id="maleCheck">Male</input>
<input type="radio" onclick="javascript:maleFemaleCheck();" id="femaleCheck">Female</input>

要实现预期效果，您可能需要在单击任何特定单选按钮时添加某些元素，这可以使用事件"onclick"来完成。您也可以将表单包含在父元素中，例如div，以便以后可以使用appendChild元素。例如，尝试运行以下代码：

HTML:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>####</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <div id="container">
            <label for="female">FEMALE: </label>
            <input type="radio" name="gender" id="female" onclick="makeRadio(parentElement);"><br />
            <label for="male">MALE: </label>
            <input type="radio" name="gender" id="male"><br />
        </div>
        <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>

JS:

//get parent element
var parentElement = document.getElementById('container');
//add the new elements
function makeRadio(pElement){  //pElement refers to the parent element
    var radioButton = document.createElement('input');
    radioButton.setAttribute('type' , 'radio');
    radioButton.setAttribute('id' , 'newRadio');
    var label = document.createElement('label');
    label.textContent = 'YES';
    label.setAttribute('for' , 'newRadio');
    pElement.appendChild(label);
    pElement.appendChild(radioButton);
}

现在，类似地，您可以找到添加更多元素的方法，只是不要一次又一次地重复此代码。这只是一个例子。

方式2:

如果您不想添加元素，可以将它们包含在标记中，但可以使用CSS隐藏它们。使用类似的东西

function showElement(){ if(document.getElementById("#id of check box").checked) //show the hidden check box }

也有帮助。

希望有帮助：）