在单击单选按钮时显示相应的文本字段

-1

我有两个单选按钮“是”和“否”，单击“是”时应显示两个文本字段并单击“否”应该生成另一个输入文本字段。以前的输入字段应该隐藏，如何在HTML中实现这一点？在单击单选按钮时显示相应的文本字段

<input type="Radio" name="radio2text" value="Radiobutton1" onclick="javascript:radioWithText('yes')" checked="checked" />Yes 
 

 
    <input type="Radio" name="radio2text" value="Radiobutton2" onclick="javascript:radioWithText('no')" />No 
 

 
    <div id="Incident ID" style="display:visible;"> 
 
     <br>Incident ID :<input type="Text" name="Incident ID"/></br> 
 
    </div> 
 
\t  
 
    <div id="Description" style="display:visible;"> 
 
     <br>Description :<input type="Text" name="Description"/></br> 
 
    </div> \t  
 

 
    <div id=" Ref" style="display:visible;"> 
 
     <br>Ref :<input type="Text" name="Ref"/></br> 
 
    </div> 
 
     
 

 
    <script type="text/javascript" language="JavaScript"> 
 
\t  function radioWithText(d) { 
 
\t \t  if(d =='yes'){ 
 
\t \t \t  document.getElementById('Incident ID').style.display = "visible"; 
 
\t \t \t  document.getElementById('Description').style.display = "visible"; 
 
\t \t \t  } else (d == 'no') { 
 
\t \t \t  document.getElementById('Ref').style.display = "visible"; 
 
\t \t  } 
 
\t \t } 
 
    </script>

我需要在这里改变以获得所需的输出？我得到了两个单选按钮的所有输入字段。

来源

2017-09-03 Saranya

欢迎堆栈溢出。请提供您正在使用的代码以及您迄今尝试的代码。 –

请不要将您的代码作为评论发布。回去编辑你的问题，并在其中包含代码（格式化）。 –

是的，谢谢你，现在代码被添加问题 – Saranya

你有大量的拼写错误，并没有真正设置你的代码正确。见内嵌批注下面的详细资料：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Your page title here</title> 
 
    <style> 
 
    /* This CSS class is applied, by default to all the labels and 
 
     textboxes. The JavaScript just adds or removes it as needed. */ 
 
    .hidden { display:none; } 
 
    
 
    /* Give each element that uses this class a one line top and bottom margin to 
 
     separate it from other elements. */ 
 
    .row { margin: 1em 0; } 
 
    </style> 
 
</head> 
 
<body> 
 
    <!-- Radio Buttons should have a value that describes the meaning of the button. 
 
     Here, yes and no will do it. Also, don't use inline HTML event attributes, such 
 
     as "onclick", ever. It's extremely outdated, can lead to bugs and duplicated 
 
     code and doesn't follow modern best-practices. Instead do your event handling 
 
     in JavaScript. --> 
 
    <input type="Radio" name="radio2text" value="yes" checked="checked">Yes 
 
    <input type="Radio" name="radio2text" value="no">No 
 

 
    <!-- All of the following is hidden by default. --> 
 
    <!-- Don't include spaces in element ID's --> 
 
    <div id="IncidentID" class="hidden row"> 
 
    <!-- Don't use break tags for arbitrary line feeds. They are for breaking content 
 
     at a logical flow. Use CSS for layout. Also, don't use "/" at the end of 
 
     an opening tag as this syntax isn't needed and can cuase you to use it in 
 
     places where you shouldn't. You had </br> for example, which is incorrect. --> 
 
    Incident ID :<input type="Text" name="Incident ID"> 
 
    </div> 
 

 
    <div id="Description" class="hidden row"> 
 
    Description :<input type="Text" name="Description"> 
 
    </div> 
 

 
    <div id="Ref" class="hidden row"> 
 
    Ref :<input type="Text" name="Ref row"> 
 
    </div> 
 
     
 
    <!-- no need for 'type="text/javascript"' and 'language=javascript' --> 
 
    <script> 
 

 
    // Get all the radio buttons and put them into an array 
 
    var radioButtons = Array.from(document.querySelectorAll("input[type='radio']")); 
 
     
 
    // Loop through the array of radio buttons 
 
    radioButtons.forEach(function(btn){ 
 
     // Set up a click event handling function for each button 
 
     btn.addEventListener("click", radioWithText); 
 
    }); 
 
    
 
    // No need to pass any data to this function because the button that triggers it 
 
    // ("this" in the code below) can just look at its own HTML value to know what the 
 
    // meaning of the button is. 
 
    \t function radioWithText() { 
 
     // Get references to the elements the function needs to work with. 
 
     var incident = document.getElementById('IncidentID'); 
 
     var description = document.getElementById('Description'); 
 
     var ref = document.getElementById('Ref'); 
 
     
 
    \t if(this.value ==='yes'){ 
 
     // Instead of gettting/setting inline styles with the style property, just add 
 
     // or remove pre-made CSS classes. Since all the textboxes and labels start out 
 
     // with the CSS "hidden" class applied to them, it's just a matter of adding that 
 
     // class or removing it as necessary. 
 
\t  incident.classList.remove("hidden"); 
 
\t  description.classList.remove("hidden"); 
 
     ref.classList.add("hidden"); 
 
\t  } else { 
 
     incident.classList.add("hidden"); 
 
    \t  description.classList.add("hidden"); 
 
\t  ref.classList.remove("hidden"); 
 
\t  } 
 
    \t } 
 
    </script> 
 
</body> 
 
</html>

来源

2017-09-03 18:12:31

在单击单选按钮时显示相应的文本字段

回答

相关问题