在單擊單選按鈕時顯示相應的文本字段

-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

在單擊單選按鈕時顯示相應的文本字段

回答

相關問題