Question

嗨大家好我是html和javascript的新手，所以我需要一个非常基本的任务帮助。

使用单选按钮我想更改我的表单，例如，如果选择“A”单选按钮，它应该显示一个表单，我可以输入我的姓名和年龄，如果选择“B”，它会显示其他表单当我点击单选按钮'B'

时，我可以看到一张图片，但名称和年龄的文字字段不再可见

任何帮助将不胜感激

Answer 1

您可以使用输入的onchange属性来调用javascript函数，该函数隐藏了A＆amp;显示B，反之亦然

 function hideA(x) {
   if (x.checked) {
     document.getElementById("A").style.visibility = "hidden";
     document.getElementById("B").style.visibility = "visible";
   }
 }

 function hideB(x) {
   if (x.checked) {
     document.getElementById("B").style.visibility = "hidden";
     document.getElementById("A").style.visibility = "visible";
   }
 }

Show :
<input type="radio" onchange="hideB(this)" name="aorb" checked>A |
<input type="radio" onchange="hideA(this)" name="aorb">B
<div id="A">
  <br/>A's text</div>
<div id="B" style="visibility:hidden">
  <br/>B's text</div>

Answer 2

我喜欢Answer from Vinayak Garg

虽然需要一个更便携的解决方案，可以使用基本结构的许多选项，交换选项需要最少的JavaScript

接下来的两个片段中使用的示例函数是：

function swapConfig(x) {
  var radioName = document.getElementsByName(x.name);
  for (i = 0; i < radioName.length; i++) {
    document.getElementById(radioName[i].id.concat("Settings")).style.display = "none";
  }
  document.getElementById(x.id.concat("Settings")).style.display = "initial";
}

function swapConfig(x) {
    var radioName = document.getElementsByName(x.name);
    for(i = 0 ; i < radioName.length; i++){
      document.getElementById(radioName[i].id.concat("Settings")).style.display="none";
    }
    document.getElementById(x.id.concat("Settings")).style.display="initial";
  }

<fieldset>
  <legend>Url and Domain Configuration</legend>
  <p>
    <label for="production">Production</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" checked="checked" />
    <label for="development">Development</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" />
  </p>
  <div id="productionSettings">
    <br/>Production Settings
    <p>
      <label for="p1">Production1</label>
      <input type="text" name="p1" value="/">
    </p>
  </div>
  <div id="developmentSettings" style="display:none">
    <br/>Development Settings
    <p>
      <label for="d1">Developent1</label>
      <input type="text" name="d1" value="/">
    </p>
  </div>
</fieldset>

这样做可以在不更改javascript的情况下添加新选项例如添加 alpha 和 beta 选项，如下所示，您将看到使用相同的javascript。

function swapConfig(x) {
  var radioName = document.getElementsByName(x.name);
  for (i = 0; i < radioName.length; i++) {
    document.getElementById(radioName[i].id.concat("Settings")).style.display = "none";
  }
  document.getElementById(x.id.concat("Settings")).style.display = "initial";
}

<fieldset>
  <legend>Url and Domain Configuration</legend>
  <p>
    <label for="production">Production</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" checked="checked" />
    <label for="development">Development</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" />
    <label for="alpha">Alpha</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="alpha" />
    <label for="beta">Beta</label>
    <input type="radio" onchange="swapConfig(this)" name="urlOptions" id="beta" />
  </p>
  <div id="productionSettings">
    <br/>Production Settings
    <p>
      <label for="p1">Production</label>
      <input type="text" name="p1" value="/">
      </p>
  </div>
  <div id="developmentSettings" style="display:none">
    <br/>Development Settings
    <p>
      <label for="d1">Developent</label>
      <input type="text" name="d1" value="/">
    </p>
  </div>
  <div id="alphaSettings" style="display:none">
    <br/>Alpha Settings
    <p>
      <label for="a1">Alpha</label>
      <input type="text" name="a1" value="/">
    </p>
  </div>
  <div id="betaSettings" style="display:none">
    <br/>Beta Settings
    <p>
      <label for="b1">Beta</label>
      <input type="text" name="b1" value="/">
      </p>
  </div>
</fieldset>

通过向函数添加第二个变量可以更加可重用：

function swapConfig(x, y) {
  var radioName = document.getElementsByName(x.name);
  for (i = 0; i < radioName.length; i++) {
    document.getElementById(radioName[i].id.concat(y)).style.display = "none";
  }
  document.getElementById(x.id.concat(y)).style.display = "initial";
}

function swapConfig(x, y) {
      var radioName = document.getElementsByName(x.name);
      for (i = 0; i < radioName.length; i++) {
        document.getElementById(radioName[i].id.concat(y)).style.display = "none";
      }
      document.getElementById(x.id.concat(y)).style.display = "initial";
    }

<fieldset>
  <legend>Url and Domain Configuration</legend>
  <p>
    <label for="production">Production</label>
    <input type="radio" onchange="swapConfig(this, 'Settings')" name="urlOptions" id="production" checked="checked" />
    <label for="development">Development</label>
    <input type="radio" onchange="swapConfig(this,'Settings')" name="urlOptions" id="development" />
    <label for="alpha">Alpha</label>
    <input type="radio" onchange="swapConfig(this,'Settings')" name="urlOptions" id="alpha" />
    <label for="beta">Beta</label>
    <input type="radio" onchange="swapConfig(this,'Settings')" name="urlOptions" id="beta" />
  </p>
  <p>
    <label for="alphaVar">Alpha</label>
    <input type="radio" onchange="swapConfig(this,'Val')" name="urlVars" id="alphaVar" checked="checked"  />
    <label for="betaVar">Beta</label>
    <input type="radio" onchange="swapConfig(this,'Val')" name="urlVars" id="betaVar" />
  </p>
  <div id="productionSettings">
    <br/>Production Settings
    <p>
      <label for="p1">Production</label>
      <input type="text" name="p1" value="/">
      </p>
  </div>
  <div id="developmentSettings" style="display:none">
    <br/>Development Settings
    <p>
      <label for="d1">Developent</label>
      <input type="text" name="d1" value="/">
    </p>
  </div>
  <div id="alphaSettings" style="display:none">
    <br/>Alpha Settings
    <p>
      <label for="a1">Alpha</label>
      <input type="text" name="a1" value="/">
    </p>
  </div>
  <div id="betaSettings" style="display:none">
    <br/>Beta Settings
    <p>
      <label for="d1">Beta</label>
      <input type="text" name="b1" value="/">
      </p>
  </div>
  <div id="alphaVarVal">
    <br/>Alpha Values
    <p>
      <label for="aV1">Alpha Vals</label>
      <input type="text" name="aV1" value="/">
      </p>
  </div>
  <div id="betaVarVal" style="display:none">
    <br/>Beta Values
    <p>
      <label for="bV1">Beta Vals</label>
      <input type="text" name="bV1" value="/">
      </p>
  </div>
</fieldset>

Javascript for循环在此Answer of the question For-each over an array in JavaScript?

中有详细描述

Answer 3

这可以这样做。

    <html>
    <head>
          <script language="Javascript">
               function show(x)
                              {
                                var element=document.getElementById(x.id);
                                if(element.id=='a')
                                {
                                  document.getElementById("area").innerHTML="Name : <input type='text' id='name' >";
                                }
                                else 
                                {
                                  document.getElementById("area").innerHTML="<img src='imgSrc' alt='NoImage'>"
                                }
                              }
           </script>
   </head>
   <body> 
        <input type="radio" onclick="show(this)" name="radioButton"  id="a" >A  
        <input type="radio" onclick="show(this)" name="radioButton"  id="b" >B
        <br> <br> <br>
    <div id="area">  </div>
   </body>
   </html>

Answer 4

    <!DOCTYPE html>
    <html>
    <body>

    <div class="row clearfix">

      <input type="radio" name="salary_status" id="Hourly"  onclick="Hourly()"> &nbsp; Hourly &nbsp;

   <input type="radio" name="salary_status" id="Percentage"  onclick="Percentage()">&nbsp; Percentage&nbsp;

                            </div>
                                <div class="row clearfix">
                                <p id="hourly" style="display:none"> <input type="text" placeholder=" Hourly" name="Hourly" placeholder="Hourly" required="required" class="form-control col-md-9 col-xs-12" ></p>
                                <p id="percentage" style="display:none"> <input type="number"  name="Percentage"  placeholder="Percentage" required="required" class="form-control col-md-9 col-xs-12" ></p>


                            </div>

    <script>
     var text1 = document.getElementById("percentage");
     var text = document.getElementById("hourly");
    function Hourly() {
        var checkBox = document.getElementById("Hourly");

        if (checkBox.checked == true){
            text.style.display = "block";
            text1.style.display = "none";
        } else{
           text.style.display = "none";
        }
    }
    function Percentage() {
        var checkBox = document.getElementById("Percentage");

        if (checkBox.checked == true){
            text1.style.display = "block";
            text.style.display = "none";
        } else {
           text.style.display = "none";
        }
    }
    </script>

    </body>
    </html>

Answer 5

我以更简单的方式修改了上述内容，尝试根据你的需要进行编辑，

<html>
<head>
<script language="Javascript">
function hideA()
{

    document.getElementById("A").style.visibility="hidden";
    document.getElementById("B").style.visibility="visible";    

}

function hideB()
{
    document.getElementById("B").style.visibility="hidden";
    document.getElementById("A").style.visibility="visible";

}
</script>
</head>
<body>Show : 
<input type="radio"  name="aorb" onClick="hideB()" checked>A | 
<input type="radio"  name="aorb" onClick="hideA()">B
<div style="position: absolute; left: 10px; top: 100px;" id="A"><br/>A's text</div>
<div style="position: absolute; left: 10px; top: 100px; visibility:hidden" id="B"><br/>B's text</div>
</body>
</html>

使用单选按钮更改表单

5 个答案: