2

Pretendo que ao colocar um valor no <input type="number" /> selecione automaticamente o <input type='checkbox' />.

Segue meu HTML:

<div>
   <input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' 
      value='Peq_Almoço' $marcado_pequeno $disabled /> 
   <strong style='color: #000000'>
      Peq. Almoço
   </strong>
</div>
<div style='width:40%;position:relative;float:left'>
   <input $disabled min='0' oninput='this.value = Math.abs(this.value)' 
      type='number' name='arrachar[$year, $month, $day][Qtd]' 
      value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>
0

2 Respostas 2

3

Pode fazer assim, chamando uma função com oninput enviando 2 parâmetros: value do checkbox, que servirá como seletor, e valor do input. Quando for 0, desmarca o checkbox:

function marcaBox(b,v){
   document.querySelector("[type='checkbox'][value='"+b+"']").checked = v > 0 ? true : false;
}
<input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
<strong style='color: #000000'>Peq. Almoço</strong></div>  <div style='width:40%;position:relative;float:left'>
<input $disabled min='0' oninput='this.value = Math.abs(this.value); marcaBox("Peq_Almoço", this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />

Para múltiplos elementos

A lógica é quase a mesma, mudando apenas os parâmetros e a forma de selecionar o checkbox:

function marcaBox(e){
   var box = e.parentNode.previousElementSibling.querySelector("[type='checkbox']");
   box.checked = e.value > 0 ? true : false;
}
<div>
   <input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
   <strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
   <input $disabled min='0' oninput='this.value = Math.abs(this.value); marcaBox(this)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>

<div>
   <input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
   <strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
   <input $disabled min='0' oninput='this.value = Math.abs(this.value); marcaBox(this)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>

Pode criar também eventos para cada input, aí neste caso não precisa chamar a função no oninput:

var inputs_ = document.querySelectorAll("[type='number']");
for(var x=0; x<inputs_.length; x++){
   inputs_[x].addEventListener("input", function(){
      var box = this.parentNode.previousElementSibling.querySelector("[type='checkbox']");
      box.checked = this.value > 0 ? true : false;
   });
}
<div>
   <input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
   <strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
   <input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>

<div>
   <input type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço' $marcado_pequeno $disabled>
   <strong style='color: #000000'>Peq. Almoço</strong>
</div>
<div style='width:40%;position:relative;float:left'>
   <input $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>

7
  • não funcionou, deve estar a faltar me alguma coisa. A função fica dentro deste script <script type="text/javascript">function marcaBox(b,v){document.querySelector("[type='checkbox'][value='"+b+"']").checked = v > 0 ? true : false;}</script>?
    – Bruno
    Commented 18/05/2018 às 14:35
  • Isso mesmo, dentro do script.
    – Sam
    Commented 18/05/2018 às 14:38
  • Mas não está a seleccionar quando coloco valor no input
    – Bruno
    Commented 18/05/2018 às 14:39
  • Tem só um ou são vários?
    – Sam
    Commented 18/05/2018 às 14:39
  • são vários inputs e vários checkbox
    – Bruno
    Commented 18/05/2018 às 14:40
0

document.getElementById('checkboxAlmoco').onchange = function(){
document.getElementById('peqAlmoco').checked = true;
};
<div>
   <input id="peqAlmoco" type='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' 
      value='Peq_Almoço' $marcado_pequeno $disabled /> 
   <strong style='color: #000000'>
      Peq. Almoço
   </strong>
</div>
<div style='width:40%;position:relative;float:left'>
   <input id="checkboxAlmoco" $disabled min='0' oninput='this.value = Math.abs(this.value)' 
      type='number' name='arrachar[$year, $month, $day][Qtd]' 
      value='$marcado_pequeno_qtd' style='width:65px; height: 22px' />
</div>

Observe que adicionei id no seu código, sem ele não funciona

Você deve fazer log-in para responder a esta pergunta.

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