在网页中输出单选按钮

时间:2015-03-06 13:07:52

标签: javascript html input radio-button output

我试图将选中的单选按钮的值输入为函数参数之一(此处为 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>

我不知道要放什么而不是 ?? 符号确定符号是正还是负。

5 个答案:

答案 0 :(得分:2)

将输入元素设为

<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>

答案 1 :(得分:1)

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

答案 2 :(得分:1)

<!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>

答案 3 :(得分:1)

您可以使用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 :(得分:1)

您可以完全取消第三个参数,并可以根据无线电检查属性输出符号。

<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>