将单选按钮数值打印到文本框

时间:2014-02-26 12:25:25

标签: javascript html radio-button

我只是想知道如何动态地将选定的无线电值打印到文本框,以便文本框中的值与相应的所选单选按钮的值匹配,使用javascript?非常感谢任何帮助,我刚刚开始使用javascript并且发现它很难!

P.S。我只熟悉javascript,对于帮助发布JQuery解决方案的人们感到遗憾!我很感激!

HTML代码:

<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual" name="car" value="277790.00" checked="checked" >
<label for ="gtmanual">GT Manual -  &euro; 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto" name="car" value="28,500.00" >
<label for ="gtauto">GT Automatic -  &euro; 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual" name="car" value="32,450.00">
<label for ="gtsmanual">GT-S Manual -  &euro; 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual" name="car" value="33,155.00">
<label for ="gtsauto">GT-S Auto -  &euro; 33,155.00 </label>
 <br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>

这是javascript代码:

var total=0
var carcost=0

gtmanual=document.getElementById("gtmanual")
gtmanual=document.getElementListner("click" calculateCar, false);

window.onload=function calculateCar() {
var mycar=document.getElementByName("car");
 for (var i=0; i<mycar.length; i++)
 {
         if (mycar[i].checked) {
             carcost = parseFloat(mycar[i].value);
             break;
          }
          var total+= total+carcost=0;
     }

 document.getElementById("total").value=total;


}

4 个答案:

答案 0 :(得分:3)

我已经创建了你想要的东西,但它已经完成了jQuery:

链接到完整的工作演示 - http://jsfiddle.net/b7YNp/

jQuery的:

$('input[name="car"]').change(function(){
    $('#total').val($('input[name="car"]:checked').val());
});

答案 1 :(得分:3)

尝试此代码。这是根据您的要求在JavaScript中

   <html>
<head>
</head>
<script>
function getvalue(temp)
{
document.getElementById("total").value=temp.value;
}
</script>
<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual"  name="car" value="277790.00" onclick="getvalue(this)">
<label for ="gtmanual">GT Manual -  &euro; 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto"  name="car" value="28,500.00" onclick="getvalue(this)">
<label for ="gtauto">GT Automatic -  &euro; 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual"  name="car" value="32,450.00" onclick="getvalue(this)">
<label for ="gtsmanual">GT-S Manual -  &euro; 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual"  name="car" value="33,155.00" onclick="getvalue(this)">
<label for ="gtsauto">GT-S Auto -  &euro; 33,155.00 </label>
 <br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>

答案 2 :(得分:1)

以下是您的解决方案:http://jsfiddle.net/webcarvers/DU2AZ/

JS

$(document).ready(function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
$("input").on('click', function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
});
});

答案 3 :(得分:1)

你可以通过这个简单的JS -

来做

示例:click here

var rad = document.getElementsByName('car');
var value = null;
for(var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
    value=document.querySelector('input[name="car"]:checked').value;
    document.getElementById('total').value=value ; 
  };
}