title: How to display/hide columns when checkboxes are checked
body: <p>I have a table that displays data (Brand Name, Location Form, Value, etc..). I was instructed to create filter which consists of check-boxes. </p>
  
  <p>When a user checks one checkbox, show only that columns pertaining to those checkboxes. If a user checks multiple checkboxes, only show those columns pertaining to those checkboxes.</p>
  
  <p>The issue I am encountering is showing multiple columns if multiple checkboxes are selected. How can I achieve this?</p>
  
  <p>The following is the table:</p>
  
  <pre><code>&lt;table class="equipTable" id="myTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="brandName"&gt;Brand Name&lt;/th&gt;               
              &lt;th class="makeModelNo"&gt;Make/Model No&lt;/th&gt;
              &lt;th class="serialNumber"&gt;Serial Number&lt;/th&gt;
              &lt;th class="assetTag"&gt;Asset Tag&lt;/th&gt;
              &lt;th class="locationFrom"&gt;Location From&lt;/th&gt;
              &lt;th class="company"&gt;Company&lt;/th&gt;
              &lt;th class="value"&gt;Value&lt;/th&gt;
              &lt;th class="lastModified"&gt;Last Modified&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;cfoutput query="EquipD"&gt;
  
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="brandName"&gt;
                  &lt;div style="float: left"&gt;
                      &lt;a href="javascript:poptasticcnotes('IT_Decomm_Print.cfm?EquipID=#EquipID#');" title="Test Print"&gt;
                          &lt;img src="images/printers-and-faxes-icon_sm.png" alt="Print this record" class="no-border" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;                  
                  &lt;div style="margin-left: 5px; margin-top: 10px; float: left"&gt;#BName#&lt;/div&gt;
              &lt;/td&gt;
              &lt;td class="makeModelNo"&gt;#Model#&lt;/td&gt;
              &lt;td class="serialNumber"&gt;&lt;a href="mtn_EquipD.cfm?a=s&amp;id=#EquipID#"&gt;#SNo#&lt;/a&gt;&lt;/td&gt;
              &lt;td class="assetTag"&gt;#ATag#&lt;/td&gt;
              &lt;td class="locationFrom"&gt;#LFrom#&lt;/td&gt;
              &lt;td class="company"&gt;#Company#&lt;/td&gt;
              &lt;td class="value"&gt;#CValue#&lt;/td&gt;
              &lt;td class="lastModified"&gt;#EquipD.SubmitBy# &lt;br&gt;#DateFormat("#EquipD.ESubmitDt#", "mm/dd/yyyy")#&lt;/em&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
           &lt;tr&gt;
              &lt;td colspan="8" id="resForSub"&gt;&lt;strong&gt;&lt;u&gt;REASON&lt;/u&gt;:&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/strong&gt;#ReasonD#&lt;/td&gt;
  
          &lt;/tr&gt;
      &lt;/tbody&gt;
  
      &lt;/cfoutput&gt;
  </code></pre>
  
  <p></p>
  
  <p>The jquery code below:      </p>
  
  <pre><code>$(document).ready(function() {
      $('input[type="checkbox"]').click(function(){
          var checkBoxes = "", chkBoxesSelected = new Array();
          var idsChecked = {BrandName: 'brandName', makeModelNo: 'makeModelNo', SerialNumber: 'serialNumber', AssetTag: 'assetTag', LocationForm: 'locationFrom', Company: 'company', Value: 'value', LastModified: 'lastModified'};
  
          //console.log(x);
  
          $('input[type=checkbox]').each(function () {
              checkBoxes += $(this).attr('id') + "-" + (this.checked ? "checked" : "not checked") + "/";
          });
  
          chkBoxesSelected = checkBoxes.split("/");
  
          for(var x = 0; x &lt; chkBoxesSelected.length; x++){
              var temp = chkBoxesSelected[x];
  
              for(var c = 0; c &lt; idsChecked.length; c++){
                  var temp2 = idsChecked[c];
  
                  if(temp == temp2){
                      //show the columns that are have checkbox checked
                  }else{
                      //don't show the columns that do not have checkbox checked
                  }
  
              }
          }
  
          //console.log(chkBoxesSelected);
      });
  });
  </code></pre>