2

Conforme o Snippet abaixo, ao clicar em uma checkbox, as outras deveriam ser desmarcadas, porém só acontece se clicar nelas da direita para à esquerda, caso eu clique nelas da esquerda para a direita, nada acontece.


Alguém tem idéia do que está acontecendo?


Explicação:

Ao selecionar um checkbox, aplicarei um filtro X em um campo Y. Já existem outros Radio Button em uso, e meu superior quer que seja usado os checkbox.

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

    function marcaDesmarca() {
        if (d.checked) {
            document.getElementById('porcentagem').checked = false;
            document.getElementById('hora').checked = false;
        } else if (p.checked) {
            document.getElementById('dinheiro').checked = false;
            document.getElementById('hora').checked = false;
        } else if (h.checked) {
            document.getElementById('dinheiro').checked = false;
            document.getElementById('porcentagem').checked = false;
        }
    }
<div style='position: relative;'>
                <input id="dinheiro" name="tipoentrada" type="checkbox" value="D" onclick="marcaDesmarca()"> <label style='display: contents;'>Dinheiro</label>
                <input id="porcentagem" name="tipoentrada" type="checkbox" value="P" onclick="marcaDesmarca()"> <label style='display: contents;'>Porcentagem</label>
                <input id='hora'  name="tipoentrada" type="checkbox" value="H" onclick="marcaDesmarca()"> <label style='display: contents;'>Hora/Minuto</label>
            </div>

11
  • 6
    Se tu quer marcar só uma opção, radio button não seria mais adequado?
    – Mathiasfc
    Commented 8/06/2017 às 17:49
  • 1
    Por qual motivo exatamente?
    – Woss
    Commented 8/06/2017 às 17:50
  • 9
    Se for só uma questão visual, utilize radio e defina appearance como checkbox (veja um exemplo). Desta forma parecerá que são checkbox, mas são radio e funcionam como radio. O que seu superior pediu não faz sentido e você deve orientá-lo a não fazer.
    – Woss
    Commented 8/06/2017 às 17:57
  • 3
    "O que seu superior pediu não faz sentido e você deve orientá-lo a não fazer.", até brinquei na resposta mas completamente de acordo com essa colocação do @AndersonCarlosWoss.
    – Mathiasfc
    Commented 8/06/2017 às 17:59
  • 2
    A resposta tá correta, mas a abordagem não é boa. Das três ideias a melhor é a do @AndersonCarlosWoss, com toda certeza.
    – Jéf Bueno
    Commented 8/06/2017 às 18:04

3 Respostas 3

7

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>

6
  • 3
    ainda não estou acostumado com essa notação do es6, voce pode explicar qual a lógica dentro do foreach? você atribui c para c.checked e depois compara com o caller?
    – RFL
    Commented 8/06/2017 às 18:05
  • 2
    Posso explicar sim, mas não tem nada a ver com ES6. É só uma simples atribuição booleana. Veja: a propriedade checked de cada elemento ira receber o resultado da expressão booleana c == caller, caller é sempre quem chamou o evento, ou seja, se o elemento for o mesmo que chamou o evento, a propriedade checked recebe true, caso contrário, ela recebe false.
    – Jéf Bueno
    Commented 8/06/2017 às 18:08
  • 1
    @RafaelAcioly Talvez circundar a expressão com parênteses a torne mais legível.
    – Jéf Bueno
    Commented 8/06/2017 às 18:12
  • Realmente seu código é muito limpo e fácil de entender, apliquei em meu código. Excelente!! Commented 8/06/2017 às 18:57
  • 1
    Só os mais modernos. Mas isso é detalhe secundário na resposta, não? O código pode ser alterado para checks.forEach(function(c) { c.checked = (c == caller) });
    – Jéf Bueno
    Commented 8/06/2017 às 19:41
4

Use o <input type="radio"> e altere a aparência do elemento para parecer um checkbox:

input[type='radio']{
  -webkit-appearance: checkbox;
     -moz-appearance: checkbox;
      -ms-appearance: checkbox;
          appearance: checkbox
}
<label for='red'>Vermelho</label>
<input id='red' type='radio' name='selection' checked>

<label for='green'>Verde</label>
<input id='green' type='radio' name='selection'>

<label for='blue'>Azul</label>
<input id='blue' type='radio' name='selection'>

Ou alterando a aparência das "caixas" com imagens:

/* Esconde o elemento "padrão" do radiobutton. */
input[type='radio']{
  display: none;
}

/* checkbox ñ marcado */
input[type='radio'] + label::before {
  content: '';
  display: inline-block;
  background: url(https://i.sstatic.net/vdAsr.png) no-repeat;
  width: 30px;
  height: 30px;
}

/* checkbox marcado */
input[type='radio']:checked + label::before {
  background: url(https://i.sstatic.net/hOuFX.png) no-repeat;
}
<input id='red' type='radio' name='selection'>
<label for='red'>Vermelho</label>

<input id='green' type='radio' name='selection'  checked>
<label for='green'>Verde</label>

<input id='blue' type='radio' name='selection'>
<label for='blue'>Azul</label>

2
2

Ainda acho que seria melhor usar radio button, mas ordens são ordens... Segue uma alternativa, ao marcar um checkbox é passado o id do mesmo por parâmetro para o marcaDesmarca(id) ai o ajuste é feito através do id. O problema do seu código é que se o checkbox dinheiro estivesse marcado ele sempre ia cair no primeiro if.

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

function marcaDesmarca(id) {
  if (id == "dinheiro") {
    document.getElementById('porcentagem').checked = false;
    document.getElementById('hora').checked = false;
  } else if (id == "porcentagem") {
    document.getElementById('dinheiro').checked = false;
    document.getElementById('hora').checked = false;
  } else if (id == "hora") {
    document.getElementById('dinheiro').checked = false;
    document.getElementById('porcentagem').checked = false;
  }
}
<div style='position: relative;'>
  <input id="dinheiro" name="tipoentrada" type="checkbox" value="D" onclick="marcaDesmarca(this.id)"> <label style='display: contents;'>Dinheiro</label>
  <input id="porcentagem" name="tipoentrada" type="checkbox" value="P" onclick="marcaDesmarca(this.id)"> <label style='display: contents;'>Porcentagem</label>
  <input id='hora' name="tipoentrada" type="checkbox" value="H" onclick="marcaDesmarca(this.id)"> <label style='display: contents;'>Hora/Minuto</label>
</div>

0

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .