Skip to main content
adicionou 1021 caracteres ao conteúdo
Fonte Link
Jéf Bueno
  • 69,8mil
  • 22
  • 134
  • 244

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>

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>

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>

removeu 151 caracteres do conteúdo
Fonte Link
Jéf Bueno
  • 69,8mil
  • 22
  • 134
  • 244

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)").

var d = document.getElementById('dinheiro');
var p = document.getElementById('porcentagem');
var h = document.getElementById('hora');

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>

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)").

var d = document.getElementById('dinheiro');
var p = document.getElementById('porcentagem');
var h = document.getElementById('hora');

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>

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>

adicionou 67 caracteres ao conteúdo
Fonte Link
Jéf Bueno
  • 69,8mil
  • 22
  • 134
  • 244

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)").

var d = document.getElementById('dinheiro');
var p = document.getElementById('porcentagem');
var h = document.getElementById('hora');

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>

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)").

var d = document.getElementById('dinheiro');
var p = document.getElementById('porcentagem');
var h = document.getElementById('hora');

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>

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)").

var d = document.getElementById('dinheiro');
var p = document.getElementById('porcentagem');
var h = document.getElementById('hora');

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>

Fonte Link
Jéf Bueno
  • 69,8mil
  • 22
  • 134
  • 244
Carregando