Show/hide elements with checkbox check/unchek

Question

I am trying to show and hide tr of table with checkbox check and uncheck. I tried the following script not working for me.

$('.checks').on('ifChecked', function(event) {
  var checked = $(this).val();
  if (checked == 1) {
    $('.vegetables').show();
  }
  if (checked == 2) {
    $('.fruits').show();
  }
});

.hidden {
  display: none;
}



  
   vegetables
   
  
   Fruits
   



  
    
      
        Vegetablese:
      
    
    
      
        Vegetables:
        
      
    
    
      
        Fruits:
      
    
    
      
        Fuits:

user_462627 · Answer

Here's what you need to do:

Change ifChecked with onchange. There's no event like ifChecked.
Use toggle based on the state of the checkbox.
Check for $(this).checked to find the state. This will return true or false.

$('.checks').on('change', function(event) {
  var checked = $(this).val();
  if (checked == 1) {
    $('.vegetables').toggle($(this).checked);
  }
  if (checked == 2) {
    $('.fruits').toggle($(this).checked);
  }
});

.hidden {
  display: none;
}



  
     vegetables
  
  
     Fruits
  



  
    
      
        Vegetablese:
      
    
    
      
        Vegetables:
        
      
    
    
      
        Fruits:
      
    
    
      
        Fuits:

user_519413 · Answer

Theres a couple of issues in your logic. Firstly ifChecked is not a valid event. Use change instead. Secondly the logic doesn't work to hide elements. To do that you'd need to loop through all checkboxes and determine their state in order to show/hide the content underneath.

The simplest and most extensible way to achieve what you require is to use a data attribute to specify which element should be toggled when the checkbox is updated. Then you can simply hide/show each element in the set. Try this:

let $checks = $('.checks').on('change', () => $checks.each((i, el) => $(el.dataset.target).toggle(el.checked)));

.hidden {
  display: none;
}



  
   vegetables
   
  
   Fruits
   



  
    
      
        Vegetablese:
      
    
    
      
        Vegetables:
        
      
    
    
      
        Fruits:
      
    
    
      
        Fuits:

Show/hide elements with checkbox check/unchek

2 Answers