Question

我有两个单选按钮＆＃34;是＆＃34;和＆＃34; no＆＃34;，点击＆＃34;是＆＃34;应显示两个文本字段，然后单击＆＃34; no＆＃34;应生成另一个输入文本字段。应该隐藏以前的输入字段，如何在HTML中实现这一点？

＆＃13;

    <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>
	   
    <div id="Description" style="display:visible;">
         <br>Description :<input type="Text" name="Description"/></br>
    </div>	   

    <div id=" Ref" style="display:visible;">
        <br>Ref :<input type="Text" name="Ref"/></br>
    </div>
     

    <script type="text/javascript" language="JavaScript">
	    function radioWithText(d) {
		    if(d =='yes'){
			    document.getElementById('Incident ID').style.display = "visible";
			    document.getElementById('Description').style.display = "visible";
			    } else  (d == 'no') {
			    document.getElementById('Ref').style.display = "visible";
		    }
		}
    </script>

＆＃13;

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

Answer 1

你有大量的拼写错误，并没有真正正确设置你的代码。有关详细信息，请参阅下面的内嵌评论：

＆＃13;

<!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.
  	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');
        
  	  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.
	      incident.classList.remove("hidden");
	      description.classList.remove("hidden");
        ref.classList.add("hidden");
	    } else {
        incident.classList.add("hidden");
  	    description.classList.add("hidden");
	      ref.classList.remove("hidden");
	    }
  	}
  </script>
</body>
</html>

＆＃13;

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

1 个答案: