0

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><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(){
var inputs = $('.checkbox');

inputs.each(function(index, element){
if(element.checked) {
  var children = $(element).parent().parent().children('.checkbox');

  children.each(function(i, child){
    $(child).prop('checked', true);
  });
 }
 });

 });

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

1 Resposta 1

1

Veja se isto ajuda a chegar a uma solução:

$('#aplicaTodos').on('click', function(){

  var values = carregaDadosDia('dia1');
  atribuiDadosDias(['dia2', 'dia3'], values.checkedValues, values.textValues);
  
})

function carregaDadosDia(dia){
    var checkedValues = Array(8).fill(false);
    var textValues = Array(7).fill('');
   
    $('#' + dia).find('input[type="checkbox"]').each(function(index){
      checkedValues[index] = $(this).prop("checked");
    });     
    $('#' + dia).find('input[type="text"]').each(function(index){
      textValues[index] = $(this).val();
    });
    
    return {'checkedValues' : checkedValues, 'textValues' : textValues};
}

function atribuiDadosDias(dias, checkedValues, textValues){
  dias.forEach((dia) => {
    atribuiDadosDia(dia, checkedValues, textValues);
  });
}

function atribuiDadosDia(dia, checkedValues, textValues){
  $('#' + dia).find('input[type="checkbox"]').each(function(index){
    $(this).prop('checked', checkedValues[index]); 
  })
  
  $('#' + dia).find('input[type="text"]').each(function(index){
    $(this).val(textValues[index]);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
  <button id="aplicaTodos">Aplica a Todos</button>
  <table>
    <tr>
      <th>Quinta</th>
      <th>Sexta</th>
      <th>Sábado</th>
    </tr>
    <tr>
      <td>
        <div id='dia1'>
          <input type="checkbox">2019-08-01  
          <div>
            <input type="checkbox">Peq.Almoço
            <input type="text" size="10">
          </div>  
          <div>
            <input type="checkbox">Almoço
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Almoço (Dieta)
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Lanche
            <input type="text" size="10">
          </div>    
          <div>
            <input type="checkbox">Jantar
            <input type="text" size="10">
          </div>  
          <div>
            <input type="checkbox">Jantar (Dieta)
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Ceia
            <input type="text" size="10">
          </div> 
        </div>
      </td>
      <td>
        <div id='dia3'>
          <input type="checkbox">2019-08-03  
          <div>
            <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
            <input type="text" size="10">
          </div>  
          <div>
            <input type="checkbox">Almoço
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Almoço (Dieta)
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Lanche
            <input type="text" size="10">
          </div>    
          <div>
            <input type="checkbox">Jantar
            <input type="text" size="10">
          </div>  
          <div>
            <input type="checkbox">Jantar (Dieta)
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Ceia
            <input type="text" size="10">
          </div> 
        </div>
      </td>
      <td>
        <div id='dia2'>
          <input type="checkbox">2019-08-02  
          <div>
            <input type="checkbox" name="vehicle" value="Bike">Peq.Almoço
            <input type="text" size="10">
          </div>  
          <div>
            <input type="checkbox">Almoço
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Almoço (Dieta)
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Lanche
            <input type="text" size="10">
          </div>    
          <div>
            <input type="checkbox">Jantar
            <input type="text" size="10">
          </div>  
          <div>
            <input type="checkbox">Jantar (Dieta)
            <input type="text" size="10">
          </div> 
          <div>
            <input type="checkbox">Ceia
            <input type="text" size="10">
          </div> 
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Baseado no código html que me entregou:

$('#elemento').click(function() {
  var checkedValues = Array(8).fill(false);
  var textValues = Array(7).fill('');
  var checkedStep = 0;
  var textStep = 0;
  $('tr').find('input[type="checkbox"]').each(function(index, value){
    if(index < 8){
      checkedValues[index] = $(this).prop("checked");
    }else{
      if(checkedStep == 8){
        checkedStep = 0;
      }
      $(this).prop('checked', checkedValues[checkedStep++]);
    }
  });
  $('tr').find('input[type="number"]').each(function(index, value){
    if(index < 7){
      textValues[index] = $(this).val();
    }else{
      if(textStep == 7){
        textStep = 0;
      }
      $(this).val(textValues[textStep++]);
    }
  });
});

Codepen

7
  • eu não posso separar no html os dias por div, porque crio os dias em loop. O html está dentro de uma variável.
    – Bruno
    9/07/2019 às 11:01
  • @Bruno Forneça o html do seu exemplo completo para poder trabalhar com os elementos reais que tem. No seu exemplo usa algo que me parece ser variáveis de php de alguma framework. 9/07/2019 às 11:03
  • atualizei a pergunta com o código que faltava.
    – Bruno
    9/07/2019 às 11:10
  • @Bruno eu precisava era do html resultante, em vez da imagem era bom ter algo que podesse manipular usando JS. 9/07/2019 às 11:13
  • @Bruno não, estou a falar do html com o calendário completo e com todas as checkbox, tal como tem na sua imagem. 9/07/2019 às 11:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .