自动选中日期复选框

时间:2018-11-15 08:50:46

标签: javascript html

我有3个复选框和2个输入。 第二个复选框是1 parent()中的input type number,而第三个复选框是2 parent()中的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>";}

通过在我拥有estre脚本的checkbox中放置一个大于零的值来自动标记2和3 input type number

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

在填写1或2 input type number时,除了自动标记checkbox parent()之外,我还想自动检查日期的前checkbox。 可以改用我的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 = !getValuesLessorEqualZero([this]);

    var firstBox = document.getElementById('firstCB');
    firstBox.checked = this.value > 0 ? true : false;

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

但是有一个问题,当我在输入中输入大于零的值时,它会根据我要填写的输入自动标记第一天的复选框而不是日期。例如,我在2018-11-18日的输入中输入了值,并选中了2018-11-01日的日期复选框。 图像问题示例: Imagem

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

首先在第一行中写了double equal:

SocketException

第二,还不清楚,因此,如果有什么需要记住的话,您需要将输入的内容放入表单标签中,并使用“ get”或“ request”或“ post”全局变量获取信息。

最后,针对您的问题。

$marcado_pequeno =$marcado_almoco =$marcado_pequeno_qtd =$marcado_almoco_qtd='';