Javascript Live-Berechnung von Radiobuttons

Question

Es gibt einige Radio-Buttons

<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 

ich die "Daten-Preis" von ausgewählten Radiobutton mit Live-Wechsel drucken möchten. Wie kann ich das machen?

Answer 1

Ich weiß nicht, was genau Sie fragen .. aber wenn Sie nur den Datenpreis drucken möchten, können Sie es so machen.

$(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/