Skip to main content
3 de 9
adicionou 3100 caracteres ao conteúdo
Bruno
  • 1,4mil
  • 12
  • 37

Aplicar a todos com checkbox

Faço o registo das refeições desta forma, como mostro na imagem:

inserir a descrição da imagem aqui

Criei o botão Aplicar a Todos, que é para, depois de preencher o dia 1 do mês, preencher os restantes dias do mês com os mesmos dados. Por exemplo:

Prencho assim o dia 1:

inserir a descrição da imagem aqui

Ao clicar no botão Aplica a Todos preenchesse os restantes dias da mesma forma:

Código:

<input type='button' id='elemento' value='Aplicar a Todos' />

<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'>$year-$month-$day <br /> 
<div><input type='checkbox' class='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço'>Peq. Almoço</div> <div><input ref='firstCB{$year}{$month}{$day}' min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' /> <br /></div> 
<div><input type='checkbox' class='checkbox1' name='arrachar[$year, $month, $day][opcaoB]'  value='Almoço'>Almoço</div> <div><input ref='firstCB{$year}{$month}{$day}' min='0' oninput='this.value = Math.abs(this.value)' type='number' name='arrachar[$year, $month, $day][Qtd1]' value='$marcado_almoco_qtd'/> <br /> </div></td>

Javascript:

$('#elemento').on('click', function(){
  var inputs = [...document.querySelectorAll("[type='checkbox']")];
   if(inputs == 'checked'){ // condição
      $('.checkbox').prop('checked', true);
      $('.checkbox1').prop('checked', true);
   }
});

Pretendia que selecionasses todas as checkboxes em todos os dias como no dia 1 e também preenchesse os inputs com o mesmo valor do dia 1. Da forma que tenho a condição não selecciona nenhuma checkbox ao clicar no botão Aplicar a todos.

Estou a tentar desta forma:

<input type='button' id='elemento' value='Aplicar a Todos' />

<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'>$year-$month-$day <br /> 
    <div><input type='checkbox' class='checkbox' name='arrachar[$year, $month, $day][OpcaoA]' value='Peq_Almoço'>Peq. Almoço</div> <div><input ref='firstCB{$year}{$month}{$day}' min='0' oninput='this.value = Math.abs(this.value)' type='number' class='checkbox' name='arrachar[$year, $month, $day][Qtd]' value='$marcado_pequeno_qtd' /> <br /></div> 
    <div><input type='checkbox' class='checkbox1' name='arrachar[$year, $month, $day][opcaoB]'  value='Almoço'>Almoço</div> <div><input ref='firstCB{$year}{$month}{$day}' min='0' oninput='this.value = Math.abs(this.value)' type='number' class='checkbox1' name='arrachar[$year, $month, $day][Qtd1]' value='$marcado_almoco_qtd'/> <br /> </div></td>

$('#elemento').on('click', function(){
    const dayChecks = document.querySelectorAll('.checkbox');
    const dayInputs = document.querySelectorAll('.checkbox');
    const dayChecks1 = document.querySelectorAll('.checkbox1');
    const dayInputs1 = document.querySelectorAll('.checkbox1');

    dayChecks.forEach( input => { // Handles checkboxes
      if(input.checked){
         const elClass = input.parentElement.getAttribute('class');
         const allEls = document.querySelectorAll(`.${elClass}`);
         allEls.forEach( (el) => {
            el.querySelector('.checkbox"]').setAttribute('checked', 'checked');
         });
      }
      });
     
     dayInputs1.forEach( input => {
     if(input.value != ''){
         const value = input.value;
         const elClass = input.parentElement.getAttribute('class');
         const allEls = document.querySelectorAll(`.${elClass}`);
         allEls.forEach( (el) => {
            el.querySelector('.checkbox"]').value = value;
         });
      }
     });
     
     dayChecks1.forEach( input => { // Handles checkboxes
      if(input.checked){
         const elClass = input.parentElement.getAttribute('class');
         const allEls = document.querySelectorAll(`.${elClass}`);
         allEls.forEach( (el) => {
            el.querySelector('.checkbox1"]').setAttribute('checked', 'checked');
         });
      }
      });
     
     dayInputs1.forEach( input => {
     if(input.value != ''){
         const value = input.value;
         const elClass = input.parentElement.getAttribute('class');
         const allEls = document.querySelectorAll(`.${elClass}`);
         allEls.forEach( (el) => {
            el.querySelector('.checkbox1"]').value = value;
         });
      }
     });
   
});

Mas não selecciona os restantes dias com os valores do dia 1 do mês.

Bruno
  • 1,4mil
  • 12
  • 37