How to display/hide columns when checkboxes are checked

I have a table that displays data (Brand Name, Location Form, Value, etc..). I was instructed to create filter which consists of check-boxes.

When a user checks on a checkbox, display only that column that pertains to the checkbox (Ex. If user checks the checkbox "Brand Name", only display that column that pertains to that checkbox). If a user checks on multiple checkboxes, display those columns that pertain to their columns (Ex. If user checks "Brand Name", "Location Form", "Value", and "Company", only display those columns that pertain to those checkboxes). If user selects no checkboxes, display all columns.

Here are the checkboxes:

<ul id="opt" style="display:none">
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="BrandName" value="" id="BrandName" /></li>
    <li><label for="Brand Name">Brand Name</label></li>
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="makeModelNo" value="" id="makeModelNo" /></li>
    <li><label for="Make/Model No">Make/Model No</label></li>
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="SerialNumber" value="" id="SerialNumber" /></li>
    <li><label for="Serial Number">Serial Number</label></li>
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="AssetTag" value="" id="AssetTag" /></li>
    <li><label for="Asset Tag">Asset Tag</label></li><br /><br />
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="LocationFrom" value="" id="LocationFrom" /></li>
    <li><label for="Location From">Location From</label></li>
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="Company" value="" id="Company" /></li>
    <li><label for="Company">Company</label></li>
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="Value" value="" id="Value" /></li>
    <li><label for="Value">Value</label></li>
    <li><input onclick="multiChecked();" type="checkbox" class="checkbox" name="LastModified" value="" id="LastModified" /></li>
    <li><label for="Last Modified">Last Modified</label></li>
</ul>

Each td and th contains a class which I would like to use to either hide that column or display the column (ex. The column Brand Name, in both the th and td tags, contain the class 'brandName'. If Brand Name column is not selected, hide the column by using the class they share).

The following is the table:

<table class="equipTable" id="myTable">
    <thead>
        <tr>
            <th class="brandName">Brand Name</th>               
            <th class="makeModelNo">Make/Model No</th>
            <th class="serialNumber">Serial Number</th>
            <th class="assetTag">Asset Tag</th>
            <th class="locationFrom">Location From</th>
            <th class="company">Company</th>
            <th class="value">Value</th>
            <th class="lastModified">Last Modified</th>
        </tr>
    </thead>

    <cfoutput query="EquipD">

    <tbody>
        <tr>
            <td class="brandName">
                <div style="float: left">
                    <a href="javascript:poptasticcnotes('IT_Decomm_Print.cfm?EquipID=#EquipID#');" title="Test Print">
                        <img src="images/printers-and-faxes-icon_sm.png" alt="Print this record" class="no-border" />
                    </a>
                </div>                  
                <div style="margin-left: 5px; margin-top: 10px; float: left">#BName#</div>
            </td>
            <td class="makeModelNo">#Model#</td>
            <td class="serialNumber"><a href="mtn_EquipD.cfm?a=s&id=#EquipID#">#SNo#</a></td>
            <td class="assetTag">#ATag#</td>
            <td class="locationFrom">#LFrom#</td>
            <td class="company">#Company#</td>
            <td class="value">#CValue#</td>
            <td class="lastModified">#EquipD.SubmitBy# <br>#DateFormat("#EquipD.ESubmitDt#", "mm/dd/yyyy")#</em></td>
        </tr>

         <tr>
            <td colspan="8" id="resForSub"><strong><u>REASON</u>:&nbsp;&nbsp;&nbsp;&nbsp;</strong>#ReasonD#</td>

        </tr>
    </tbody>

    </cfoutput>

Currently, in Jquery, I was able to determine which checkboxes are checked by doing that following:

$(document).ready(function() {
    var checkBoxes= "", chkBoxesSelected = new Array();

    $('input[type=checkbox]').each(function () {
          checkBoxes+= $(this).attr('id') + "-" + (this.checked ? "checked" : "not checked") + "/";
    });

    chkBoxesSelected = checkBoxes.split("/");
    console.log(chkBoxesSelected);   
});

I figured, which I may be wrong, I would need to create another array that contains the id's that are checked of each checkbox followed by the classes that pertain to that particular id.

Not sure if syntax or even approach is correct:

var idsChecked = {BrandName-check: 'brandName', MakeModelNo-check: 'makeModelNo', SerialNumber-check: 'serialNumber', AssetTag-check: 'assetTag', LocationForm-check: 'locationFrom', Company-check: 'company', Value-check: 'value', LastModified-check: 'lastModified'};

From here, I believe I would need to create two for loops (one for the array that contains which checkboxes are checked and for the list of ids).

I believe it would be something like the following:

for(var x = 0; x < chkBoxesSelected.length; x++){
    var temp = chkBoxesSelected[x];

    for(var c = 0; c < idsChecked.length; c++){
        var temp2 = idsChecked[c];

        if(temp == temp2){
            //display that column checked
        } 
        else{
            //hide that column not checked
        }
    }
}

The struggle I am having is grabbing the class value from idsChecked. How can I obtained the value so I can hide or display that column? Or is there a better approach that I can implement? Any help would be appreciated.