Resetting MYSQL Table Data

JavaScript
1

I have the following borrowed code from previous postings, tweaked for my needs.

<table id="filter">
  <thead>
    <tr>
      <th>Bathrooms</th>
      <th>Foundations</th>
    </tr>
    <tr>
      <td rowspan="3">
        <input type="checkbox" id="oneb" name="1">
        <label for="oneb">1</label>
<br>
        <input type="checkbox" id="twob" name="2">
        <label for="twob">2</label>
<br>
        <input type="checkbox" id="threeb" name="3">
        <label for="threeb">3</label>
      </td>
    </tr>
    <tr>
       <td rowspan="3">
        <input type="checkbox" id="pier" name="pier">
        <label for="pier">Pier</label>
<br>
        <input type="checkbox" id="slab" name="slab">
        <label for="slab">Slab</label>
<br>
        <input type="checkbox" id="raised" name="raised">
        <label for="raised">Raised</label>
       </td>
     </tr>
 </thead>
</table>

<style type='text/css'>
  #filter tr {
      height: 3px;
      border-collapse: collapse;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script>
      
 
      function getHomesFilterOptions(){
        var opts = [];
        $checkboxes.each(function(){
          if(this.checked){
            opts.push(this.name);
          }
        });
 
        return opts;
      }

      var $checkboxes = $("input:checkbox");
      
        $checkboxes.on("change", function(){
        var opts = getHomesFilterOptions();
        updateHomes(opts);
      });

      function updateHomes(opts){
        $.ajax({
          type: "POST",
          url: "http://www.alphaomegawebservices.net/demo/designtech/wp-content/themes/elite/query.php",
          dataType : 'json',
          cache: false,
          data: {filterOpts: opts},
          success: function(records){
            $('#homes tbody').html(makeTable(records));
          }
        });
      }
 
    </script>

It is written specifically to show an empty table of data until checkboxes are selected to populate the data needed. My issue is if checkboxes are cleared, the entire data from the table remains displayed. I would like to have it return to an empty table. Thanks.

2 
        // some code here
        var $checkboxes = $("input:checkbox");
      
        $checkboxes.on("change", function() {
            var opts = getHomesFilterOptions();
            if (opts.length === 0) {
                $('#homes tbody').empty();
            } else {
                updateHomes(opts);
            }
        });
        // some more code here
3

Thanks for the help! (and the quick response as well)!