Ele está fazendo isso porque é justamente o que o código manda fazer. A melhor alternativa, como já foi citado, seria usar radio buttons.
Como isso não é possível, segue uma alternativa que simula o comportamento deles. Perceba que não é necessário fazer um monte de código, é só saber qual foi o checkbox que disparou o evento (caller
) e desmarcar todos exceto ele.
Eu segui o seu padrão de desenvolvimento e como você definiu os eventos direto no HTML, usando o onclick
, eu alterei a chamada do método para passar como parâmetro o elemento que disparou o evento (onclick="marcaDesmarca(this)"
).
function marcaDesmarca(caller) {
var checks = document.querySelectorAll('input[type="checkbox"]');
checks.forEach(c => c.checked = (c == caller) );
}
<div style='position: relative;'>
<input id="dinheiro" name="tipoentrada" type="checkbox" value="D"
onclick="marcaDesmarca(this)">
<label style='display: contents;'>Dinheiro</label>
<input id="porcentagem" name="tipoentrada" type="checkbox" value="P"
onclick="marcaDesmarca(this)">
<label style='display: contents;'>Porcentagem</label>
<input id='hora' name="tipoentrada" type="checkbox" value="H"
onclick="marcaDesmarca(this)">
<label style='display: contents;'>Hora/Minuto</label>
</div>
Versão pra rodar em qualquer browser.
function marcaDesmarca(caller) {
var checks = document.querySelectorAll('input[type="checkbox"]');
for(let i = 0; i < checks.length; i++) {
checks[i].checked = checks[i] == caller;
}
}
<div style='position: relative;'>
<input id="dinheiro" name="tipoentrada" type="checkbox" value="D"
onclick="marcaDesmarca(this)">
<label style='display: contents;'>Dinheiro</label>
<input id="porcentagem" name="tipoentrada" type="checkbox" value="P"
onclick="marcaDesmarca(this)">
<label style='display: contents;'>Porcentagem</label>
<input id='hora' name="tipoentrada" type="checkbox" value="H"
onclick="marcaDesmarca(this)">
<label style='display: contents;'>Hora/Minuto</label>
</div>