通过单选按钮进行Javascript实时计算

有一些单选按钮

<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

a1
a2
a3
a4

---

我想打印所选单选按钮的“数据价格”，并进行实时更改。我怎样才能做到这一点呢？

我不知道你到底在问什么。。但如果您只想打印数据价格，可以这样做

$（函数（）{
$（'input[type=radio]'）。在（'click'，function（）上{
数据=$（此）.data（'price'）；
$（“#结果”）。文本（数据）；
});
});

a1
a2
a3
a4
HTML

a1
a2
a3
a4

Javascript（onclick）

var inputs=document.getElementsByClassName（'radio'）；
var textbox=document.getElementById（'price'）；
var i；
对于（i=0；i

Javascript（eventListener）

for（i=0；i

此警报值可能重复。我需要打印数据价格以输入字段值
<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">

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

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