I have this code :
$(document).ready(function(){
$("[name='valor1']").on('blur',function(){
$(".empresa1").text($(this).val());
$(".valor1").val($(this).val());
});
$("[name='valor2']").on('blur',function(){
$(".empresa2").text($('[name="valor2"]').val());
$(".valor2").val($('[name="valor2"]').val());
});
$("[name='valor3']").on('blur',function(){
$(".empresa3").text($('[name="valor3"]').val());
$(".valor3").val($('[name="valor3"]').val());
});
$("[name='empresa1']").on('click',function(){
alert($(this).val());
});
$("[name='empresa2']").on('click',function(){
alert($(this).val());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" name="valor1" value=""/>
<input type="text" name="valor2" value=""/>
<input type="text" name="valor3" value=""/>
<BR/><BR/><BR/>
<label class="empresa1"></label><input type="radio" name="empresa1" class="valor1" val=""/>
<label class="empresa2"></label><input type="radio" name="empresa1" class="valor2" val=""/>
<label class="empresa3"></label><input type="radio" name="empresa1" class="valor3" val=""/>
<BR/>
<label class="empresa1"></label><input type="radio" name="empresa2" class="valor1" val=""/>
<label class="empresa2"></label><input type="radio" name="empresa2" class="valor2" val=""/>
<label class="empresa3"></label><input type="radio" name="empresa2" class="valor3" val=""/>The idea is to fill in the 3 inputs, popular the input radio value and write the text typed in the labels.
The problem: if I do not enter any value and click on one of the radio buttons, the value "on" is printed.
Enter the jsfiddle I made above, hit the radio button without typing anything and check the alert that will appear, why this? Can you leave it empty?