JSFiddle - React, Tailwind, and code Playground
by Trisox
HTML
<label>€999,00<input type="radio" name="test" data-priceupdate="€999,00" value="1"/></label><br/>
<label>€1610,00<input type="radio" name="test" data-priceupdate="€1610,00" value="2"/></label><br/>
<label>€1210,00<input type="radio" name="test" data-priceupdate="€1210,00" value="2"/></label><br/><br/>
<span class="update">€999,00</span>
CSS
span,label{display:inline-block; width:100px; padding:5px; border:1px solid grey;}
input{float:right;}
JavaScript
$.fn.updateContainer = function(update) {
return this.each(function() {
var $this = $(this);
function updateChecked() {
if ($($this).prop('checked') === true ) {
update.html($this.attr('data-priceupdate'))
}
}
updateChecked();
$this.on('change',function(){
updateChecked();
});
});
};
$('input[type="radio"]').updateContainer($('.update'));