Select checkbox when placing value from a text box

Asked

Viewed 200 times

2

I intend that by placing a value on <input type="number" /> automatically select the <input type='checkbox' />.

Follows 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

2 answers

3


You can do so by calling a function with oninput sending 2 parameters: value of checkbox, which will serve as selector, and value of the input. When you go 0, clear the 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 the way to select the 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 each input, there in this case need not call the function in the 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>

  • didn’t work, I must be missing something. The function stays inside this script <script type="text/javascript">function marcaBox(b,v){document.querySelector("[type='checkbox'][value='"+b+"']").checked = v > 0 ? true : false;}</script>?

  • That’s right, inside the script.

  • But you are not selecting when I input value

  • There’s only one or more?

  • are various inputs and various checkbox

  • I added in the answer another form with several elements.

  • Let’s go continue this discussion in chat.

Show 2 more comments

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 to your code without it does not work

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.