<input class= "radio" type="radio" id="single" data-value="10" name="licence">
<label>Single License</label><br>
<input class= "radio" type="radio" id="five" data-value="20" name="licence">
<label>5 License</label><br>
<input class= "radio" type="radio" id="developer" data-value="30" name="licence">
<label>Developers License</label><br><br><br>
<span class="price">Price after selection will come here</span>
$( document ).ready(function() {
$(".radio") // select the radio by its id
.change(function(){ // bind a function to the change event
if( $(this).is(":checked") ){ // check if the radio is checked
var val = $(this).data("value"); // retrieve the value
$(".price").html(val); //Print the value
}
});
});
This Pen doesn't use any external CSS resources.