我对jquery并不了解,所以我的代码工作得很好,但是他们的问题是,当取消选中复选框时隐藏结果。(检查从数据库中获取结果-取消选中隐藏这些结果)
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>
jQuery ajax代码从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>
并且是ajax jquery代码
$(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);
}
});
}
});
});
你可以检查class="catcfid"
DOM中是否存在带有div的div,或者不使用$(".main-area-courses-continer > ." + catcf).length == 0
长度是否0
表示没有该div的div,则可以发出ajax请求以从后端获取该div, $("." + catcf).parent().show();
否则请使用else显示该div,如果使用来unchecked
隐藏该div $("." + catcf).parent().show();
。
演示代码:
$(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>
问题可能是如果我选中该框之一..那么我想选择第二个..它可以是.main_containe区域的参考,并将这两个或两个复选框一起提交到php页面,并从sql查询中获取结果?如何通过jQuery Ajax发送多重播放复选框
嗨,这篇文章将有助于实现相同的目标。