首页 文章

如果我选择一个特定的单选按钮，如何在我的表单中添加新字段？ [关闭]

提问于
浏览 次
-1

我想制作一个表格，其中有针对性别的单选按钮选择 . 现在有两个单选按钮MALE和FEMALE .

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

但是当用户选择性别MALE时，则没有选项出现（此选项仅适用于FEMALE）..只有提交按钮就在那里..

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

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

javascript php jquery html

3 回答

  • 0

    我用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>
    回复于
  • 0
    <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>
    回复于
  • 0

    要执行您期望的操作，您可能需要在单击任何特定无线电时添加某些元素，您可以使用事件'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);">
    
            <label for="male">MALE: </label>
            <input type="radio" name="gender" id="male">
    
        </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 }

    也可以帮忙 .

    希望能帮助到你：）

    回复于

相关问题