Select checbox automatically

0

I've created a calendar for meal bookings. The date and types of meals are being saved in the same column as the database table. When I put the amount of meals automatically select the checkbox for this type of meals, as shown in the image:

NowIwantyoutoputthevalueintheinput,selectthecheckboxforthattypeofmealandalsoautomaticallyselectthedatecheckboxaccordingtothedateonwhichIputthequantity.ForthisIamusingthisscript:

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;
};

But it only works well if it's on day 1 of the month, I'll show you: If it is on day 1 of the month everything goes well:

Butifyoudothesameforanyotherdayofthemonth,alwaysselectthecheckboxfromday1,whereyouhavetoselectthedayaccordingtothefill,Iwillshow:

HowcanIsolvethisproblem?

HTML

$calendar .= "<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>
<div style='width:60%;position:relative;float:left'><input type='checkbox' name='arrachar[$year, $month, $day][opcaoC]' value='Almoço_(Dieta)' $marcado_dieta $disabled> <strong style='color: #000000'>Almoço (Dieta)</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][Qtd2]' value='$marcado_dieta_qtd' style='width:65px; height: 22px' /> <br /></div> 
<div style='width:60%;position:relative;float:left'><input type='checkbox' name='arrachar[$year, $month, $day][opcaoD]' value='Lanche' $marcado_lanche $disabled> <strong style='color: #000000'>Lanche</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][Qtd3]' value='$marcado_lanche_qtd' style='width:65px; height: 22px' /><br /> </div>
</font></center></td>";
    
asked by anonymous 16.11.2018 / 12:59

1 answer

0

First set the id in your html so that it does not repeat itself and add the ref attribute on the inputs so we can find the date like this:

        $calendar .= "<td bgcolor='$color' data-semana=''><font size='2px'/> 
    <input id='firstCB{$year}{$month}{$day}' 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  ref='firstCB{$year}{$month}{$day}' $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  ref='firstCB{$year}{$month}{$day}' $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>
    <div style='width:60%;position:relative;float:left'><input type='checkbox'  name='arrachar[$year, $month, $day][opcaoC]' value='Almoço_(Dieta)' $marcado_dieta $disabled> <strong style='color: #000000'>Almoço (Dieta)</strong></div> <div style='width:40%;position:relative;float:left'><input  ref='firstCB{$year}{$month}{$day}' $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd2]' value='$marcado_dieta_qtd' style='width:65px; height: 22px' /> <br /></div> 
    <div style='width:60%;position:relative;float:left'><input type='checkbox'  name='arrachar[$year, $month, $day][opcaoD]' value='Lanche' $marcado_lanche $disabled> <strong style='color: #000000'>Lanche</strong></div> <div style='width:40%;position:relative;float:left'><input  ref='firstCB{$year}{$month}{$day}' $disabled min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd3]' value='$marcado_lanche_qtd' style='width:65px; height: 22px' /><br /> </div>
    </font></center></td>";

Now in javascript search the date field like this:

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.querySelector('#'+this.getAttribute('ref'));
    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;
};
    
16.11.2018 / 14:33