Apply to everyone with checkbox

Asked

Viewed 128 times

0

I record meals this way, as shown in the picture:

inserir a descrição da imagem aqui

I created the button Apply to All, which is to, after filling in the first day of the month, fill in the remaining days of the month with the same data. For example:

That’s how I mark day one:

inserir a descrição da imagem aqui

By clicking the button Applies to All fill in the remaining days in the same way:

Code:

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

I wanted you to select all checkboxes on every day as on day 1 and also fill in the inputs with the same value as day 1. The way I have the condition does not select any checkbox when clicking the button Apply to all.

I’m trying this way:

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

 });

But do not select the remaining days with the values of day 1 of the month.

javascript jquery

1 answer

1


See if this helps to reach a solution:

$('#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>

Based on the html code you gave me:

$('#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

  • i can’t separate the days in html by div, because I create the days in loop. html is inside a variable.

  • @Bruno Provide the html of your complete example to work with the real elements you have. In your example you use something that seems to me to be php variables of some framework.

  • updated the question with the missing code.

  • @Bruno I needed was the resulting html, instead of the image it was good to have something that could manipulate using JS.

  • @Bruno no, I’m talking about the html with the full calendar and all the checkboxes, as you have in your image.

  • I have updated the code with the full calendar that generates html

  • see in chat the html that generated, I think that put in the question will not be well accepted because it is very code

Show 2 more comments

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.