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

Question

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

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

Well, I have this code, and it works in parts, when I check the box it changes the color of my td, but when I unknow the color does not return to normal, could anyone 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

asked by anonymous 22.06.2018 / 22:05

3 answers

2

A way to do this using an object with styles.

You can check if it is checked with $(this).is(":checked") , which returns true (if checked) or false (if not checked).

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

One of the advantages of ternary is to avoid repeating code 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 must separate the values with colon : instead of comma.

Another thing to note is that you can write the names of the properties outside the quotation marks, but if there is a hyphen - , you must remove it and write the first letter after the capitalization:

'background-color' -> backgroundColor

Example:

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

See the code working:

$('.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><divclass="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>

22.06.2018 / 22:45

0

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><divclass="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>

23.06.2018 / 01:51

Doubt in script logic How can I use mouseover to change the background color of a div?

score 1 · Accepted Answer

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