$.ajax doesn't work the first time

I'm trying to filter a research thanks to some checkboxes. When i click on a checkbox an Ajax call is sent from "lista.php" to "filtro.php". Here's there's a a new query that print into the while loop of "lista.php" a div with class ".singoloRisultato" that overwrite the old foreach loop. The problem is that the Ajax call doesn't work the first time but it starts to work on the second time. Here's the code!

This is one of the checkboxes inside "Lista.php". They're all the same.

<section>
        <h5><span class="glyphicon glyphicon-signal"></span> Free Wi-Fi</h5>
         <div class="filter">
           <span class="glyphicon glyphicon-signal"></span>
           <input type="checkbox" value="1" id="wifi" name="wifi" />
           <label for="wifi"></label>
         </div>
</section>

This is the code inside the foreach loop inside "Lista.php"

<div class="singoloRisultato">
 <a href="<?php echo $row[4] ?>">
 <div class="col-sm-3 col-xs-12">
       <img src="img/<?php echo $row[3] ?>" />
 </div>
     <div class="col-sm-6 col-xs-12 nomeLista">
       <h3><?php echo $row[1] ?></h3>
       <p>
        <div class="rating">
            <p>Voto medio: <b><?php echo round($row[19], 1) ?><sub>/5</sub></b></p>
         </div>
       </p>
       <p>
         <span class="glyphicon glyphicon-map-marker"></span> <?php echo $row[11] ?>
       </p><br />
       <p>
         <em><?php echo $row[2] ?></em>
       </p>
     </div>
     <div class="col-sm-3 col-xs-12 text-center" style="line-height: 200px">
       <button class="btn btn-warning">Scopri <span class="glyphicon glyphicon-menu-right"></span></button>
     </div>
       </a>
   </div>

And this is the Ajax in "Lista.php"

$(document).ready(function(){
   $("input:checkbox").change(function() {
  function getEmployeeFilterOptions(){
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.name);
}
});
return opts;
}

var $checkboxes = $("input:checkbox");
$("input:checkbox").off();
$checkboxes.on("change", function(){
var opts = getEmployeeFilterOptions();
updateEmployees(opts);
});
updateEmployees();

function updateEmployees(opts){
$.ajax({
async: true,
type: "POST",
url: "filtro.php",
dataType : '',
cache: false,
data: {filterOpts: opts},
success: function(records){
  console.log('script loaded');

$('.risultatoLista .risultato').html(records);
}
});


}

 });

  });

Finally, this is "filtro.php"

$select = "SELECT SQL_CALC_FOUND_ROWS *, AVG(recensioni_scuole.voto) AS voto";
$from = " FROM scuole INNER JOIN zona ON scuole.id_quartiere=zona.id_quartiere LEFT JOIN recensioni_scuole ON scuole.id=recensioni_scuole.id";
$where = " WHERE TRUE AND zona.id_quartiere=1";
$groupby = " GROUP BY scuole.id";

$opts = isset($_POST['filterOpts'])? $_POST['filterOpts'] : array('');

if (in_array("wifi", $opts)){
$where .= " AND wifi = 1";
}

if (in_array("registrazione", $opts)){
$where .= " AND registrazione = 1";
}
if (in_array("parcheggio", $opts)){
$where .= " AND parcheggio = 1";
}
if (in_array("disabili", $opts)){
$where .= " AND disabili = 1";
}
if (in_array("voto1", $opts)){
$where .= " AND voto > 0.9";
}
if (in_array("voto2", $opts)){
$where .= " AND voto > 1.9";
}
if (in_array("voto3", $opts)){
$where .= " AND voto > 2.9";
}
if (in_array("voto4", $opts)){
$where .= " AND voto > 3.9";
}
if (in_array("voto5", $opts)){
$where .= " AND voto > 4.9";
}
var_dump($opts);
$sqlFiltro = $select . $from . $where . $groupby;
$stmtFiltro = $dbh->prepare($sqlFiltro);
$stmtFiltro->execute(array($quartiere));
$res = $stmtFiltro->fetchAll(PDO::FETCH_ASSOC);
echo $sqlFiltro;
 foreach ($res as $row) { ?>

   <div class="singoloRisultato">
      <a href="<?php echo $row['link'] ?>">
      <div class="col-sm-3 col-xs-12">
            <img src="img/<?php echo $row['img'] ?>" />
      </div>
          <div class="col-sm-6 col-xs-12 nomeLista">
            <h3><?php echo $row['nome'] ?></h3>
            <p>
             <div class="rating">
                 <p>Voto medio: <b><?php echo round($row['voto'], 1) ?><sub>/5</sub></b></p>
              </div>
            </p>
            <p>
              <span class="glyphicon glyphicon-map-marker"></span> <?php echo $row['nomeQuartiere'] ?>
            </p><br />
            <p>
              <em><?php echo $row['descrizione'] ?></em>
            </p>
          </div>
          <div class="col-sm-3 col-xs-12 text-center" style="line-height: 200px">
            <button class="btn btn-warning">Scopri <span class="glyphicon glyphicon-menu-right"></span></button>
          </div>
            </a>
        </div>


 <?php }

 $stmtFiltro->closeCursor();
 unset($dbh);
 }

Do you know why this is working fine except for the first time that i check a checkbox? Thank you for your help!!