带有“其他”的（必需）文本选项的 HTML 单选输入

Question

我有一组带有“其他”选项的无线电输入，该选项有一个文本字段。我的问题是如何在选择其他选项时进行文本字段。

到目前为止我想出的代码::

<form method="POST" action="testPage.php">
  <input type="radio" name="option" value="1">Option 1<br>
  <input type="radio" name="option" value="2">Option 2<br>
  <input type="radio" name="option" value="3">Option 3<br>
  <input type="radio" name="option" value="">Other 
  <input type="text" name="othertext" onchange="changeradioother()">
  <input type="submit" value="Submit">
</form>

<script>

  function changeradioother(){
  var other= document.getElementById("other");
  other.value=document.getElementById("inputother").value;
  }

</script>

Answer 1

你可以做这样的事情。 遍历所有单选按钮以检查哪个被点击。

顺便说一句，您没有在单选按钮Other 上添加id。

var radio = document.querySelectorAll("input[name='option']");

for(var i = 0;i< radio.length;i++){
  radio[i].onclick = function(){
    if(this.id == "other"){
      document.getElementById('otherText').setAttribute("required", true);
    }else{
      document.getElementById('otherText').removeAttribute("required");
    }
  }
}

<form method="POST" action="testPage.php">
  <input type="radio" name="option" value="1">Option 1<br>
  <input type="radio" name="option" value="2">Option 2<br>
  <input type="radio" name="option" value="3">Option 3<br>
  <input type="radio" name="option" id="other">Other 
  <input type="text" name="othertext" id="otherText">
  <input type="submit" value="Submit">
</form>

Answer 2

这里有很多不同的方法 为您的单选框提供 id，这是其他的，并为文本框提供 id。

 function changeradioother(){
 
  if(document.getElementById("Other").checked ) {
     if(document.getElementById("inputtext").value == ''){
         alert('input required');
     }
  }
     return false
  }

<form method="POST" action="testPage.php" onsubmit="return changeradioother()">
  <input type="radio" name="option" value="1">Option 1<br>
  <input type="radio" name="option" value="2">Option 2<br>
  <input type="radio" name="option" value="3">Option 3<br>
  <input type="radio" name="option" value="" id="Other">Other 
  <input type="text" name="othertext" id="inputtext" >
  <input type="submit" value="Submit">
</form>

Answer 3

尝试调用函数when other radio button is clicked 来设置input field to required：

<script>

function changeradioother(){
	  var other= document.getElementById("other");
	  other.value=document.getElementById("inputother").value;
	  }
function setRequired(){

	document.getElementById("inputother").required=true;
}

function removeRequired(){
if(document.getElementById("inputother").required == true){
	document.getElementById("inputother").required=false;
}
}
</script>

<form method="POST" action="testPage.php">
  <input type="radio" name="option" value="1" onclick="removeRequired();">Option 1<br>
  <input type="radio" name="option" value="2" onclick="removeRequired();">Option 2<br>
  <input type="radio" name="option" value="3" onclick="removeRequired();">Option 3<br>
  <input type="radio" name="option" value="" onclick="setRequired();" id="other">Other 
  <input id="inputother" type="text" name="othertext" onchange="changeradioother()">
  <input type="submit" value="Submit">
</form>