Question

我的HTML项目需要再次帮助。我在页面上有单选按钮，我想根据所选的单选按钮在文本框中显示输出。例如，如果我选择是，那么输出应该是＆＃34;提取服务的处理项目＆＃34;如果我选择否则输出应该是＆＃34;取件服务N / A＆＃34;。目前，我所拥有的代码显示的是Yes和No的值。如果还有其他代码，我需要解决这个问题吗？提前谢谢！

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    function showInput(){
    var ui1 = document.getElementById('pickup').value;
    var ui2 = document.getElementById('xpickup').value;
    document.getElementById('display').innerHTML = ui1 + '\n' + ui2 + '\n';
    }
    </script>  

    <form action="">
    <p> For Pick-up Service? </p>
    <input type="radio" id="pickup" name="pickup" value="Yes"> Yes<br>
    <input type="radio" id="xpickup" name="pickup" value="No"> No<br>
    </form>
    <br>
    <button type="submit" onclick="showInput();">Generate</button><br/>
    <p><textarea name="generated notes" cols="75" rows="20" id='display' >
    </textarea></p>

    </body>
    </html>

Answer 1

尝试：

var pickupradios = document.getElementsByName('pickup');
var pickupval;
for(var i = 0; i < pickupradios.length; i++){
    if(pickupradios[i].checked) pickupval = pickupradios[i].value;
}
//then time to use pickupval

Answer 2

function showInput(){ var result = document.querySelector("input[name='pickup']").value; if(result =='Yes'){ document.getElementById('display').value="process item for pickup service"; } else if(result =='No'){ document.getElementById('display').value="pickup service N/A"; } }

Answer 3

使用data属性。和querySelectorAll()用于查找已检查的值

＆＃13;

function showInput() {
var res = document.querySelectorAll('input:checked')[0].dataset.print
  document.getElementById('display').innerHTML = res;
}

＆＃13;

<form action="">
  <p> For Pick-up Service? </p>
  <input type="radio" id="pickup" name="pickup" value="Yes" data-print="process item for pickup service"> Yes<br>
  <input type="radio" id="xpickup" name="pickup" value="No" data-print="pickup service N/a"> No<br>
</form>
<br>
<button type="submit" onclick="showInput();">Generate</button><br/>
<p><textarea name="generated notes" cols="75" rows="20" id='display'>
    </textarea></p>

＆＃13;

Answer 4

您可以尝试以下代码，检查单选按钮值并设置innerHTML

＆＃13;

 <!DOCTYPE html>
    <html>
    <body>
    <script>
    function showInput(){
   var value= document.querySelector('input[name="pickup"]:checked').value;
   if(value=="Yes")
    document.getElementById('display').innerHTML="process item for pickup service"
    else
	document.getElementById('display').innerHTML="pickup service N/A"
    
    }
    </script>  

    <form action="">
    <p> For Pick-up Service? </p>
    <input type="radio"  name="pickup" value="Yes"> Yes<br>
    <input type="radio" name="pickup" value="No"> No<br>
    </form>
    <br>
    <button type="submit" onclick="showInput();">Generate</button><br/>
    <p><textarea name="generated notes" cols="75" rows="20" id='display' >
    </textarea></p>

    </body>
    </html>

＆＃13;

Answer 5

我认为这就是你要找的东西：

function showInput(){
    var outputText;
    if(document.getElementById('pickup').checked) {
        outputText = "Process item for pickup service";
    }else if(document.getElementById('xpickup').checked) {
        outputText = "Pickup service N/A";
    }
    document.getElementById('display').innerHTML = outputText;
}

如何使用if else语句显示单选按钮输入作为文本框中的输出

5 个答案: