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:
$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>";