Select checkbox when putting value in a text box

Question

Select checkbox when putting value in a text box

Navigation

#1 by (3 votes)
#2 by (0 votes)

2

I want to automatically select the <input type="number" /> when putting a value in <input type='checkbox' /> .

Follow my 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>

javascript html

asked by anonymous 18.05.2018 / 15:59

2 answers

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>

Note that I added id in your code, without it not working

18.05.2018 / 16:13

How do I configure Android Studio to save projects in another folder? Microsoft Edge passing strange characters in AJAX call

score 3 · Accepted Answer

You can do this by calling a function with oninput sending 2 parameters: value of checkbox , which will serve as selector, and value of input . When it is 0 , uncheck 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' />

For multiple elements

The logic is almost the same, changing only the parameters and how to select 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>

You can also create events for every input , in which case you do not need to call the function in 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>