产品的多重复选框选择（过滤器）
我想要做的是为产品制作一个过滤器，我从数据库中检索包含图像和一些信息的产品，并且我需要一些过滤器，如：PRODUCT和BRAND
我有这个代码，但当我选择两个过滤器，如品牌1 +产品2，向我展示品牌1的所有产品和所有产品编号2 ..我希望它合并...
这是我的代码：
HTML + PHP
<div id="row" class="row">
<?php
if(!empty($_GET["category"])){
include('open_conexion.php');
$sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
?>
<div class="col-lg-4" data-category="<?php echo $row['product'];?>" brand="<?php echo $row['brand'];?>" >
<img class="img-circle" src='images/<?php echo $row['imag']; ?>' width="180px;" height="180px;"alt="">
<h4><?php echo $row['product']." ". $row['brand']; ?></h4>
<p><?php echo $row['description'];?> </p>
<p><a class="btn btn-default" href='detalles.php?id=<?php echo $row['id_product']?>'>View Details »</a></p>
</div><!-- /.col-lg-4 -->
<?php } } ?>
</div><!-- /.row -->
和jQuery：
<script>
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.row >div').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.row >div[data-category=' + this.value + ']').show();
$('.row >div[brand=' + this.value + ']' ).show();
});
} else {
$('.row >div').show();
}
});
谢谢
我假设你正在尝试使用jquery或javascript过滤产品客户端，而不是在服务器端使用查询。
保留您的复选框和产品列表，如下所示：
<div><input name="product1" id="product1" data-id="1" class="products" type="checkbox" />Product 1</div>
<div><input name="product2" id="product2" data-id="2" class="products" type="checkbox" />Product 2</div>
<div><input name="product3" id="product3" data-id="3" class="products" type="checkbox" />Product 3</div>
<div><input name="brand1" id="brand1" data-id="1" class="brands" type="checkbox" />Brand 1</div>
<div><input name="brand2" id="brand2" data-id="2" class="brands" type="checkbox" />Brand 2</div>
<div><input name="brand3" id="brand3" data-id="3" class="brands" type="checkbox" />Brand 3</div>
<div class="row">
<div class="product" brand="1" data-category="1">product 1 brand 1</div>
<div class="product" brand="1" data-category="1">product 1 brand 1</div>
<div class="product" brand="2" data-category="1">product 1 brand 2</div>
<div class="product" brand="2" data-category="1">product 1 brand 2</div>
<div class="product" brand="3" data-category="1">product 1 brand 3</div>
<div class="product" brand="3" data-category="1">product 1 brand 3</div>
<div class="product" brand="1" data-category="2">product 2 brand 1</div>
<div class="product" brand="1" data-category="2">product 2 brand 1</div>
<div class="product" brand="2" data-category="2">product 2 brand 2</div>
<div class="product" brand="2" data-category="2">product 2 brand 2</div>
<div class="product" brand="3" data-category="2">product 2 brand 3</div>
<div class="product" brand="3" data-category="2">product 2 brand 3</div>
<div class="product" brand="1" data-category="3">product 3 brand 1</div>
<div class="product" brand="1" data-category="3">product 3 brand 1</div>
<div class="product" brand="2" data-category="3">product 3 brand 2</div>
<div class="product" brand="2" data-category="3">product 3 brand 2</div>
<div class="product" brand="3" data-category="3">product 3 brand 3</div>
<div class="product" brand="3" data-category="3">product 3 brand 3</div>
</div>
Javascript代码应该是这样的，我已经使用jQuery进行过滤。 希望你也试着用jQuery。
<script type="text/javascript">
$(function(){
$('.products, .brands').on('click', function(){
var checkedProducts = $('.products:checked');
var checkedBrands = $('.brands:checked');
if(checkedProducts.length || checkedBrands.length){
if(checkedBrands.length === 0){
$('.row > div').hide();
$.each(checkedProducts, function(){
var prdId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"]').show();
});
} else if(checkedProducts.length === 0) {
$('.row > div').hide();
$.each(checkedBrands, function(){
var brandId = $(this).attr('data-id');
$('.row > div[brand="' + brandId + '"]').show();
});
} else {
$('.row > div').hide();
$.each(checkedProducts, function(){
var prdId = $(this).attr('data-id');
$.each(checkedBrands, function(){
var brandId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"][brand="' + brandId + '"]').show();
});
});
}
} else {
$('.row > div').show();
}
});
});
</script>
而已！ 你得救了。让我知道你是否有任何问题。
你的代码中最有问题的一行（关于过滤）可能是这两个：
$('.row >div[data-category=' + this.value + ']').show();
$('.row >div[brand=' + this.value + ']' ).show();
在这里，你明确地说：“ 显示所有的 divs数据类别=价值， 并显示所有的 divs品牌=价值”。
你真正想要的是“ 显示数据类别=价值和品牌=价值的所有 div”。
你可能想尝试类似的东西
$('input[type="checkbox"]:checked').each(function() {
$('.row >div[data-category=' + this.value + '][brand=' + this.value + ']').show();
});
此外，您的代码中有一些额外的陷阱（与您的过滤问题无关）：
1）真正直截了当的SQL注入可能性在
$sql = "SELECT * FROM products WHERE category='".$_GET["category"]."'";
2）您可以将点击事件绑定到DOM中的每个复选框，即使对于不用于过滤的复选框，也可以使用更改事件而不是单击事件来更加合适（也可以通过键盘更改复选框状态，而不仅仅通过鼠标点击）
$('input[type="checkbox"]').click(function() {
如果我正确理解你的问题，你需要做的是增强你的$ sql语句，这样你只需要提取报表需要的数据：
$sql='SELECT * FROM products'; // Pull everything by default
if (isset($_GET['category']) || isset($_GET['product'])) { //Only need the following if something was checked
$sql.=' WHERE ';
if (isset($_GET['category'])) {
$sql.='category="' . $_GET['category'] . '"'; //Narrows down the results
if (isset($_GET['product'])) {
$sql.=' AND '; //Only necessary if both are checked
}
}
if (isset($_GET['product'])) {
$sql.='product="' . $_GET['product'] . '"'; //Narrows down the results...more if both were checked
}
}
如果您只在检查某项内容时运行此操作，则第一个条件不是必需的，但我确信情况并非如此。
链接地址: http://www.djcxy.com/p/17247.html