在网页中输出单选按钮答案

【问题标题】：Output a radio button in a webpage在网页中输出单选按钮
【发布时间】：2015-05-08 02:19:32
【问题描述】：

我正在尝试将选中的单选按钮的值输入为函数参数之一（此处为 sign）。这是我的代码：

    <!DOCTYPE html>
    <html>
    <head>
    <script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>

    </head>
    <body>


    <script>
    function func1 (x,y, sign){

         var z=(x+y)*sign
         document.getElementById("Z").innerHTML = z;

        }                           

    </script>
    <form >
    first input:<br>
    <input id="Y" type="text" y="Y" value=85>
    <br>
    second input:<br>
    <input id="X" type="text" x="X" value=15>
    <br> 
  <input type="radio" name="hem" value=1 id = "N" >north
  <input type="radio" name="hem" value=-1 id = "S" >south
    The Answer:<br>
    <input id="Z" type="text" z="Z" > 

    <br><br>
    </form>


<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), ?? )"> try it </button>

我不知道该放什么来代替 ?? ？符号决定符号是正还是负。

【问题讨论】：

请解释符号参数的用途..为什么要乘它..是两个输入的简单相加吗..？
“符号决定符号是正还是负。”。它决定了 WHAT 是正面的还是负面的？
z 值。它是 +1 或 -1 并乘以符号值
当您尝试在文本框中显示答案时，请使用 document.getElementById("Z").value = z; 而不是 document.getElementById("Z").innerHTML = z;。

标签： javascript html input radio-button output

【解决方案1】：

将输入元素设为

<form id="demoForm">
    first input:<br>
    <input id="Y" type="text" value=85>
    <br>
    second input:<br>
    <input id="X" type="text" value=15>
    <input type="radio" name="hem" value="1"  id="N" >north
    <input type="radio" name="hem" value="-1" id ="S" >south
    The Answer:<br>
    <input id="Z" type="text" z="Z" > 
    </form>
<script>
function getRadioVal(form, name) {
    var val;
    // get list of radio buttons with specified name
    var radios = form.elements[name];

    // loop through list of radio buttons
    for (var i=0, len=radios.length; i<len; i++) {
        if ( radios[i].checked ) { // radio checked?
            val = radios[i].value; // if so, hold its value in val
            break; // and break out of for loop
        }
    }
    return val; // return value of checked radio or undefined if none checked
}

var val = getRadioVal( document.getElementById('demoForm'), 'hem' );
alert(val); //you can pass this value as parameter
</script>

【讨论】：

【解决方案2】：

简单的方法是编写一个辅助函数来收集你的参数，然后从这个函数中调用你的函数。

【讨论】：

【解决方案3】：

您可以使用 jQuery 来获取选中的值

 $('input[name=hem]:checked').val()

只需要确保您使用的表单有一个 id。这样你就不必传递给函数，只需直接从函数中的表单获取值即可。

<script>
function func1 (x,y){
     var sign = $('input[name=hem]:checked').val();
     var z=(x+y)*sign;
     document.getElementById("Z").innerHTML = z;

    }                           

</script>

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<head>
<!--
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
-->
</head>
<body>



<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br> 
 <input type="radio" name="hem" value="1" id="N" >north</input>
 <input type="radio" name="hem" value="-1" id="S" >south </input>
The Answer:<br>
<input id="Z" type="text" z="Z" > 

<br><br>
</form>


<button type="button"     onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), getAppropriateValue() )"> try it </button>

<script>
function func1 (x,y, sign){
     var z=(x+y)*sign
     document.getElementById("Z").value = z;
    }

function getAppropriateValue(){

    var result = 0;
    var checkboxN = document.getElementById('N');
    var checkboxS = document.getElementById('S');
    if(checkboxN && checkboxN.checked) result = 1;
    if(checkboxS && checkboxS.checked) result = -1;
    return result;
}

</script>

【讨论】：

1. id = "N" => id="N", id = "S" 更改为 id="N" 2. 将所有脚本放在 html 部分之后，以便脚本可以通过它们的 id 访问元素 3. 创建一个单独的函数这将根据 radios 属性“检查”计算值 4. 插入该函数而不是 ?? 5.我没有对你的代码做太多修改，但是最好给按钮添加事件监听器，而不是使用html的“onclick”属性
也写document.getElementById("Z").value = z;而不是 document.getElementById("Z").innerHTML = z;

【解决方案5】：

你可以完全去掉第三个参数，并且可以根据无线电检查的属性输出符号。

<script>
function func1 (x,y) {
    var z=(x+y);
    if(document.getElementById("N").checked) {  
          z= z*1;
      }elseif(document.getElementById("N").checked) {
          z=z*-1;
      }
     document.getElementById("Z").value = z;
}
</script>

【讨论】：