I am not able to create a single radio button option. When I click on two options, it selects the two, when the ideal would be either one or the other.
<div><label for="b_ant">Base Anterior</label><input name="b_ant" type="radio" value="S" /></div>
<div><label for="b_grade">Base na Grade</label><input name="b_grade" type="radio" value="S" /></div>
<div><label for="b_grade">Base em Veículos Novos</label><input name="b_novos" type="radio" value="S" /></div> With pure HTML only as per my comment in your question os names devem ser iguais
When a RADIO option is selected, it will only be deselected when another RADIO option with same NAME is selected.
If you need to keep the names different, consider using jquery. example:
$(document).ready(function () {
$('input[type=radio]').change(function() {
$('input[type=radio]:checked').not(this).prop('checked', false);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><labelfor="b_ant">Base Anterior</label><input name="b_ant" type="radio" value="S" /></div>
<div><label for="b_grade">Base na Grade</label><input name="b_grade" type="radio" value="S" /></div>
<div><label for="b_grade">Base em Veículos Novos</label><input name="b_novos" type="radio" value="S" /></div>not () selects all elements except the specified element.
prop ()
prop('checked', false)used to uncheck.
not(this).prop('checked', false);will deselect all radios inputs except the selected
The name of the inputs must be the same. See the example below:
<div>
<label>
Base Anterior
<input id="ant" name="base" type="radio" value="S" />
</label>
</div>
<div>
<label>
Base na Grade
<input id="grade" name="base" type="radio" value="S" />
</label>
</div>
<div>
<label>
Base em Veículos Novos
<input id="novo" name="base" type="radio" value="S" />
</label>
</div>