Javascript живой расчет из радиокнопок

Question

Есть некоторые радио кнопки

<input type="radio" name="highlight" data-price="25.1" value="a1">a1 
<input type="radio" name="highlight" data-price="55.4" value="a2">a2 
<input type="radio" name="highlight" data-price="65.3" value="a3">a3 
<input type="radio" name="highlight" data-price="95.9" value="a4">a4 

Я хочу, чтобы напечатать «данные-цену» выбранное радио-кнопку с живым изменением. Как я могу это сделать?

Answer 1

Я не знаю, что именно вы просите .. но если вы просто хотите распечатать данные-цену, вы можете сделать это таким образом.

$(function(){ 
 
    $('input[type=radio]').on('click',function(){ 
 
    data= $(this).data('price'); 
 
    $('#result').text(data); 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" name="highlight" data-price="25.1" value="a1">a1 
 
<input type="radio" name="highlight" data-price="55.4" value="a2">a2 
 
<input type="radio" name="highlight" data-price="65.3" value="a3">a3 
 
<input type="radio" name="highlight" data-price="95.9" value="a4">a4 
 

 
<div id='result'> 
 
</div>

Answer 2

HTML

<input class='radio' type="radio" name="highlight" data-price="25.1" value="a1">a1 
<input class='radio' type="radio" name="highlight" data-price="55.4" value="a2">a2 
<input class='radio' type="radio" name="highlight" data-price="65.3" value="a3">a3 
<input class='radio' type="radio" name="highlight" data-price="95.9" value="a4">a4 
<input id="price" type="text"> 

Javascript (OnClick)

var inputs = document.getElementsByClassName('radio'); 
var textbox = document.getElementById('price'); 
var i; 
for (i = 0; i < inputs.length; i++) { 
    inputs[i].onclick = function(){ 
     textbox.value = this.dataset.price; 
    } 
} 

Javascript (EventListener)

for (i = 0; i < inputs.length; i++) { 
    function myFn(){ 
     textbox.value = this.dataset.price; 
    } 
    inputs[i].addEventListener("change",myFn); 
} 

https://jsfiddle.net/2zfjfkhL/