Automatically check date checkbox

Question

Automatically check date checkbox

Navigation

#1 by (0 votes)

0

I have 3 checkbox and 2 inputs . The second checkbox is parent() of input type number and the third checkbox is parent() of input type number :

$calendar .= "<td bgcolor='$color' data-semana=''><font size='2px'/> 
<input type='checkbox' name='arrachar[$year, $month, $day][dia]' value='$year-$month-$day' $marcado_data $disabled> <strong style='color:#5ca2df'>$year-$month-$day</strong> <br /> 
<div style='width:60%;position:relative;float:left'><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' /> <br /> </div>
<div style='width:60%;position:relative;float:left'><input type='checkbox' name='arrachar[$year, $month, $day][opcaoB]' value='Almoço' $marcado_almoco $disabled> <strong style='color: #000000'>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][Qtd1]' value='$marcado_almoco_qtd' style='width:65px; height: 22px' /> <br /> </div></font></center></td>";}

To automatically mark 2 and 3 checkbox by setting a value greater than zero in input type number I have this script :

<script> 
var inputs_ = document.querySelectorAll("[type='number'][name^='arrachar']"); 
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; 

}); 

}
</script>

When filling in the 1 or 2 input type number, in addition to automatically marking the checkbox parent() of it, I also want to automatically check the first checkbox of the date. Is it possible to adapt my script to do this?

The answer from @ osiris85 works in the example he gave, but when I apply it in my code there is a problem, I'll explain.

If you apply the @ osiris85's response in your code, filling in the inputs only selects the date on day 1 and not the date according to the day input is. For example: I fill in the inputs of the day 2018-11-18 and automatically mark only checkbox of the day 2018-11-01

As I show in the image:

php javascript jquery

asked by anonymous 15.11.2018 / 11:32

1 answer

Angle Error TypeError: _co.disable is not a function A * - Jquery + Javascript

score 0 · Answer 1

For this you can verify that always one of the values is positive if all are negative it would be discarded. To do this, you must assign an ID to the combo box and mark it or uncheck it, depending on the value of the rest.

var inputs_ = [...document.querySelectorAll("[type='number'][name^='arrachar']")]; 
for(var x=0; x<inputs_.length; x++){ 
  inputs_[x].addEventListener("input", function(){ 
    var box = this.parentNode.previousElementSibling.querySelector("[type='checkbox']"); 
    
    box.checked = !getValuesLessorEqualZero([this]);
    
    var firstBox = document.getElementById('firstCB');
    firstBox.checked =true;

    var valueAllLessOrZero = getValuesLessorEqualZero(inputs_);
    if(valueAllLessOrZero) firstBox.checked = false;
  }); 
}

const getValuesLessorEqualZero = (inputs) => {
  var lengthInputs = inputs.length;
  var valueLessOrZero = true;
  
  for(let i = 0; i < lengthInputs && valueLessOrZero; i++) {
    valueLessOrZero = inputs[i].value <= 0 ? true : false;
  }

  return valueLessOrZero;
};

<td bgcolor='$color' data-semana=''>
<font size='2px'/> 
<input id='firstCB' type='checkbox' name='arrachar[$year, $month, $day][dia]' value='$year-$month-$day' $marcado_data $disabled> 
<strong style='color:#5ca2df'>$year-$month-$day</strong> 
<br /> 
<div style='width:60%;position:relative;float:left'>
<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' /> 
<br /> 
</div>
<div style='width:60%;position:relative;float:left'>
<input type='checkbox' name='arrachar[$year, $month, $day][opcaoB]' value='Almoço' $marcado_almoco $disabled> 
<strong style='color: #000000'>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][Qtd1]' value='$marcado_almoco_qtd' style='width:65px; height: 22px' /> 
<br /> 
</div>