Reverse or hide jQuery ajax for input checkbox results

I don’t have good knowledge about jquery, so I have a code working good but their problem, is to hide the result when uncheck the checkbox .( check to get the results from the database – uncheck hide these results )

catfd.php code

 <input type="checkbox" value="2" class="catcf"> catfd2 <br />
 <input type="checkbox" value="35" class="catcf"> catfd35 <br />
 <input type="checkbox" value="22" class="catcf"> catfd22 <br />
 <input type="checkbox" value="133" class="catcf"> catfd133 <br />
 <input type="checkbox" value="28" class="catcf"> catfd28 <br />
 <input type="checkbox" value="33" class="catcf"> catfd33 <br />
 <input type="checkbox" value="55" class="catcf"> catfd55 <br />
 <input type="checkbox" value="44" class="catcf"> catfd44 <br />
 <div class="main-area-courses-continer">
<!-- here will echo the results -->

</div>

jquery ajax code get the result from PHP page ‘getvalue.php’

if(isset($_POST['catcf'])){
?>
<div class="main-area-courses-continer" >
<?php
    $catcfid= $_POST['catcf'];
    $sql = 'SELECT * FROM tablename  where cat_id = '.$catcfid.' order by p_id asc';
    $catandproid = $wpdb->get_results($sql);
    foreach($catandproid as $key){
/////////////////////////////////Updates
?>
<div class="<?php echo $catcfid; ?>" >
<?php
        echo $key->title;
?>
</div><!-- End of Continer catcfid -->
<?php
////////////////////////////////////////////
    }
}
?>
</div>

and the is the ajax jquery code

$(document).ready(function() {
  $(".catcf").on('click', function() {
    if ($('input.catcf').is(':checked')) {
      var catcf = Number($(this).val());
      $.ajax({
        url: 'getvalue.php',
        type: 'post',
        data: {
          catcf: catcf
        },
        beforeSend: function() {
          $(".main-area-courses-continer").html("Looding....");
        },
        success: function(response) {
          // Setting little delay while displaying new content
          setTimeout(function() {
            // appending posts after last post with class="post"
            $(".main-area-courses-continer:last").after(response).show().fadeIn("slow");
            $(".main-area-courses-continer").html("");
          }, 2000);
        }
      });
    }
  });
});