Invierta u oculte jQuery ajax para los resultados de la casilla de verificación de entrada

Nov 28 2020

No tengo un buen conocimiento sobre jquery, así que tengo un código que funciona bien, pero su problema es ocultar el resultado cuando desmarque la casilla de verificación. (Marque para obtener los resultados de la base de datos; desmarque ocultar estos resultados)

código catfd.php

 <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>

El código jquery ajax obtiene el resultado de la página PHP '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>

y el es el código jquery ajax

$(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);
        }
      });
    }
  });
});

Respuestas

1 Swati Nov 29 2020 at 13:48

Puede comprobar si el div con class="catcfid"existir en su DOM o no usar $(".main-area-courses-continer > ." + catcf).length == 0si la longitud es 0medio no hay tal div entonces puede presentar solicitud de ajax para llevar que a partir de back-end demás sólo demuestran que div usando $("." + catcf).parent().show();más si uncheckedocultar que div usando $("." + catcf).parent().show();.

Código de demostración :

$(document).ready(function() {
  $(".catcf").on('click', function() { var catcf = Number($(this).val());
    if ($(this).is(':checked')) { //check if the div with class catcf is not there if ($(".main-area-courses-continer >  ." + catcf).length == 0) {
        /*.ajax({
           url: 'getvalue.php',
           type: 'post',
           data: {
             catcf: catcf
           },
           beforeSend: function() {
             $(".main-area").html("Looding...."); }, success: function(response) {*/ setTimeout(function() { //$(".main_container:last").after(response).show().fadeIn("slow");
          //dummy data append ..
          $(".main_container:last").after('<div class="main-area-ourses-continer"><div class="' + catcf + '">catfd' + catcf + ' data....</div> </div>') $(".main-area").html("")//empty loading ..
        }, 100);
        /*
        });*/

      } else {
        //show that class 
        $("." + catcf).parent().show(); } } else { //hide that class means unchecked $("." + catcf).parent().hide()
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="2" class="catcf" checked> catfd2 <br />
<input type="checkbox" value="35" class="catcf"> catfd35 <br />
<input type="checkbox" value="22" class="catcf" checked> 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" checked> catfd55 <br />
<input type="checkbox" value="44" class="catcf"> catfd44 <br /> Datas :
<!--put this div for loading separtely-->
<div class="main-area"></div>

<div class="main_container">
  <div class="main-area-courses-continer">
    <div class="2">
      catfd2 data....
    </div>
  </div>
  <div class="main-area-courses-continer">
    <div class="22">
      catfd22 data....
    </div>
  </div>
  <div class="main-area-courses-continer">
    <div class="55">
      catfd55 data....
    </div>
  </div>
</div>

Ashikul Nov 29 2020 at 14:11

Simplemente cambie la CONSULTA, y creo que ese es el problema

$sql = 'SELECT * FROM tablename Where cat_id = '.$catcfid.' And status = '1' order by p_id ASC';