HTML tables should be hidden when checkbox already checked by default

Question

As a default, the checkbox is already checked but the tables are not hidden. As a default, the first two table shall be demonstrated. When you click on a few times, you can see hidden tables but they should be hidden as default checked. Do I need to call function? or Do I need to change parameter in function?

function showMe(cls) {
    var chboxs = document.getElementsByName("c1");
    var vis = 0;
    for (var i = 0; i < chboxs.length; i++) {
        if (chboxs[i].checked) {
            vis = 1;
            break;
        }
    }
    var elements = document.getElementsByClassName(cls);
    for (let e of elements) {
        if (vis === 1) {
            e.style.display = 'none';
        } else {
            e.style.display = 'table';
        }

    }
}


    
        
            Show Result
        
    



    
        Event
        Status
    
    
        
            Test 
        
        
            N/A
        
    
    
        
            Test 
        
        
            N/A
        
    
    


    
        
            
                Test 
            
            
                N/A
            
        

    


    
        
            
                1. Test input:
            
            
                N/A
            
        
        
            
                1. Expected
            
            
                N/A
            
        
    


    
        
            
                1. Test input:
            
            
                N/A
            
        
        
            
                1. Expected
            
            
                N/A
            
        
    


    
        
            
                1. Test input:
            
            
                N/A
            
        
        
            
                1. Expected
            
            
                N/A

Rory McCrossan · Accepted Answer

The quick and dirty way would be to call showMe('box') when the page loads:

function showMe(cls) {
  var chboxs = document.getElementsByName("c1");
  var vis = 0;
  for (var i = 0; i < chboxs.length; i++) {
    if (chboxs[i].checked) {
      vis = 1;
      break;
    }
  }
  var elements = document.getElementsByClassName(cls);
  for (let e of elements) {
    if (vis === 1) {
      e.style.display = 'none';
    } else {
      e.style.display = 'table';
    }
  }
}

showMe('box');


  
    
      Show Result
    
  



  
    Event
    Status
  
  
    
      Test 
    
    
      N/A
    
  
  
    
      Test 
    
    
      N/A
    
  
  


  
    
      
        Test 
      
      
        N/A
      
    

  


  
    
      
        1. Test input:
      
      
        N/A
      
    
    
      
        1. Expected
      
      
        N/A
      
    
  


  
    
      
        1. Test input:
      
      
        N/A
      
    
    
      
        1. Expected
      
      
        N/A
      
    
  


  
    
      
        1. Test input:
      
      
        N/A
      
    
    
      
        1. Expected
      
      
        N/A

However the far better approach is to remove the inline onclick event handler, and bind an unobtrusive change event handler to the checkboxes instead. Then you can simply trigger that event when the page loads.

Note that this approach has the benefit of making the first loop in your code redundant. Try this:

jQuery($ => {
  $('.show').on('change', e => {
    var targetClass = $(e.target).data('targetclass');
    $('.' + targetClass).toggle();   
  }).trigger('change');
});



  
    
      Show Result
    
  



  
    Event
    Status
  
  
    
      Test 
    
    
      N/A
    
  
  
    
      Test 
    
    
      N/A
    
  
  


  
    
      
        Test 
      
      
        N/A
      
    

  


  
    
      
        1. Test input:
      
      
        N/A
      
    
    
      
        1. Expected
      
      
        N/A
      
    
  


  
    
      
        1. Test input:
      
      
        N/A
      
    
    
      
        1. Expected
      
      
        N/A
      
    
  


  
    
      
        1. Test input:
      
      
        N/A
      
    
    
      
        1. Expected
      
      
        N/A

As an aside, you should remove the inline CSS styling, along with the width, bordercolor, cellpadding etc. attributes, and use an external stylesheet. In addition font elements have been deprecated for a very long time and should never be used.

HTML tables should be hidden when checkbox already checked by default

Answers (2)

Related Questions