HTML 带有（必需）文本选项的无线电输入 "other"

Question

我有一组无线电输入，其中一个选项 "other" 有一个文本字段。我的问题是如何在选择其他选项时将文本字段设置为必填。

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

<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

尝试调用函数 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>

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

你可以做类似的事情。遍历所有单选按钮以检查单击了哪个按钮。

顺便说一下，您没有在单选按钮 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>

HTML 带有（必需）文本选项的无线电输入 "other"

HTML radio input with (required) text option for "other"

html

javascript

forms

radio-button