How to do it when checking a checkbox it changes the background color of a td of a table and when unknowing it returns to its normal color

Asked

Viewed 87 times

1

Well, I have this code, and it works in parts, when I check the checkbox it changes the color of my td, but when I go down the color does not return to normal, could someone help me? Thanks in advance.

 $('.checkbox-regularC').click(function(){
     $('.linhaCdSRotinaTurma').css('background-color','#fff');
     $('.linhaCdSRotinaTurma').css('cursor','auto');
 })
    
.linhaCdSRotinaTurma {

    background-color: #cccc;
    cursor: not-allowed;
    border: 0px;

}
 <div class="caixaSelectsTodasCategorias">
     <div class="caixaCheckBoxTodasCategorias">
         <div class="selecionarTodos">
             <input type="checkbox" class="checkbox-regularC"> 
         </div>
     </div>
 </div>
 
 <table class="tabelaNovaRotinaSelects" id="table_rotina_default">
     <thead>
         <tr id="rotinasDefault">
             <td class='tituloCdSRotinaTurma'>
                 Titulo
             </td>                        
         </tr>
     </thead>  
     <tbody>
         <tr class="linhaCdSRotinaTurma">
             <td>Alternativas</td>      
         </tr>
     </tbody>
 </table>

javascript html jquery css

  • Will it be just one or are several on the same screen?

  • It will have only one row tr, right but with several columns

  • Newton, as a new user, reads this link https://answall.com/tour. to know what to do when asking questions and receiving answers. Abs!

3 answers

2


You can check if the checkbox is checked to do the action you want: 

$('.checkbox-regularC').click(function(){
    if ($('.checkbox-regularC').is(':checked')) {
        $('.linhaCdSRotinaTurma').css('background-color','#fff');
        $('.linhaCdSRotinaTurma').css('cursor','auto');
    } else {
        //voltar a cor ao normal
    }
});

  • Lady, it didn’t work

  • Sorry, syntax error there when closing the click, I made the correction there.

  • Anything you give a console.log($('. checkbox-regularC'). is(':checked'));

2

A way to do this using an object with the styles.

You check if it’s checked with $(this).is(":checked"), returning true (if checked) or false (if not checked).

The object opts has a function with the styles between keys {} which returns values depending on the value in the parameter i function, alternating properties using ternary (learn more about ternary operator).

One of the advantages of the ternary is to avoid code repetition when you want to take a value or another based on a conditional. Example:

// se i for true, a cor será #fff, caso contrário será #ccc
i ? '#fff' : '#ccc'

Defining styles between keys {} using .css:

Your code can be simplified. You are using .css for the same element twice:

$('.linhaCdSRotinaTurma').css('background-color','#fff');
$('.linhaCdSRotinaTurma').css('cursor','auto');

Using the keys {}, you can define multiple properties in a single block, without having to repeat the same element:

$('.linhaCdSRotinaTurma').css({
   'background-color':'#fff',
   'cursor':'auto'
});

The difference is that in this format you should separate the values with two-points : instead of a comma.

Another thing to note is that you can write the property names out of quotation marks, but in case there is a hyphen -, you should remove it and write the first letter after in uppercase:

'background-color' -> backgroundColor

Example:

$('.linhaCdSRotinaTurma').css({
   backgroundColor:'#fff',
   cursor:'auto'
});

View code in operation:

$('.checkbox-regularC').click(function(){
   var opts = function(i){
      return {
         'background-color': i ? '#fff' : '#ccc',
         'cursor': i ? 'auto' : 'not-allowed'
      };
   }
    
   $('.linhaCdSRotinaTurma')
   .css(opts($(this).is(":checked")));
});
.linhaCdSRotinaTurma {

    background-color: #cccc;
    cursor: not-allowed;
    border: 0px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caixaSelectsTodasCategorias">
   <div class="caixaCheckBoxTodasCategorias">
      <div class="selecionarTodos">
         <input type="checkbox" class='checkbox-regularC'> 
      </div>
   </div>
</div>

<table class="tabelaNovaRotinaSelects" id="table_rotina_default">
   <thead>
      <tr id="rotinasDefault">
         <td class='tituloCdSRotinaTurma'>
            Titulo
         </td>
      </tr>
   </thead>
   <tbody>
      <tr class="linhaCdSRotinaTurma">
         <td >Alternativas</td>
      </tr>
   </tbody>
</table>

1

You can create a specific CSS class for when the checkbox is checked, too, and apply to HTML tags according to the checkbox state.

$(function () {
  $('.checkbox-regularC').on('change', function() {
    var classes =
      $(this).is(':checked') ? 
        ['linhaCdSRotinaTurma','linhaCdSRotinaTurmaMarcada'] :
        ['linhaCdSRotinaTurmaMarcada','linhaCdSRotinaTurma'];

      $('.' + classes[0]).addClass(classes[1]).removeClass(classes[0]);
  });
});
    
.linhaCdSRotinaTurmaMarcada {
    background-color: #fff;
    cursor: auto;
}

.linhaCdSRotinaTurma {
    background-color: #cccc;
    cursor: not-allowed;
    border: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caixaSelectsTodasCategorias">
    <div class="caixaCheckBoxTodasCategorias">
        <div class="selecionarTodos">
            <input type="checkbox" class="checkbox-regularC"> 
        </div>
    </div>
</div>
 
<table class="tabelaNovaRotinaSelects" id="table_rotina_default">
    <thead>
        <tr id="rotinasDefault">
            <td class='tituloCdSRotinaTurma'>
                Titulo
            </td>                        
        </tr>
    </thead>  
    <tbody>
        <tr class="linhaCdSRotinaTurma">
            <td>Alternativas</td>      
        </tr>
    </tbody>
</table>

Browser other questions tagged javascript html jquery css

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