使用单选按钮过滤

Question

您好我在我建立的网站上有一些产品，我希望能够根据它们的产品范围进行过滤。我已设法使用下拉菜单为特定品牌制作过滤器，但希望能够在单击标签/选择单选按钮时过滤范围。我正在使用php和jquery来尝试实现这一点，任何人都可以告诉我哪里出错了以及我需要做些什么来解决这个问题？

这是我的php / html，显示了产品系列的选项。

<!-- Product Range -->
                         <div id="product_range">
<?php
     $sql = "SELECT * FROM `product_range`";
     $result = $conn->query($sql);

 if ($result->num_rows > 0){
     // Output data of each rowt
      while($row = $result->fetch_assoc()){
         //echo "Brand : " . $row["brand"] . " - Product : " . $row["name"] . " - " . $row["description"] . " - Price : " . $row["price"] . "<br>";
         echo    "<div class='col-lg-6 col-md-4 col-sm-5 col-xs-12 product_range " . $row['brandName'] . " all' id='products'>
                     <div class='hovereffect'>
                         <img class='img-responsive product_range_img' src='" . $row['img'] . "' alt=''>
                         <div class='overlay1'>
                             <h2> " . $row['name'] . "</h2>
                             <p> 
                                 " . $row['title'] . "
                             <br>
                             <br>
                             <form>
                                 <input type='radio' class='radio' name='selector' value='" . $row['product_range'] . "' />
                                 <label for='" . $row['product_range'] . "' id='labelSelect'>
                                     View Products
                                 </label>
                             </form>
                             </p>
                         </div>
                     </div>
                 </div>";

     }
 } else {
     echo "0 results";
 }

?>
                         </div>

然后我有这个部分，这是我希望在点击时显示的产品。

<!-- Product packs -->
                         <div id="product_group">
<?php
     $sql = "SELECT * FROM `product_packs`";
     $result = $conn->query($sql);

     if ($result->num_rows > 0){
         // Output data of each rowt
          while($row = $result->fetch_assoc()){
             //echo "Brand : " . $row["brand"] . " - Product : " . $row["name"] . " - " . $row["description"] . " - Price : " . $row["price"] . "<br>";
             echo    "<div class='col-lg-2.4 col-md-3.4 col-sm-4 col-xs-12 products " . $row['brandName'] . " all " . $row['product_range'] . "' id='products'>
                         <div class='hovereffect'>
                             <img class='img-responsive productimg' src='" . $row['img'] . "' alt=''>
                             <div class='overlay1'>
                                 <h2> " . $row['name'] . "</h2>
                                 <p> 
                                     " . $row['title'] . "
                                 <br>
                                     " . $row['header'] . "
                                 <br>
                                 <br>
                                     " . $row['price'] . "
                                 <br>
                                 <a href='#'>
                                     Add To Cart 
                                 </a> 
                                 </p>
                             </div>
                             <div class='overlay2'>
                             <div class='overlay3'>
                                 <p> 
                                     This is the description
                                 </p>
                             </div>
                             </div>
                         </div>
                     </div>";

         }
     } else {
         echo "0 results";
     }
?>
                         </div>


<!-- Single products -->                         
                         <div id="product">
<?php
     $sql = "SELECT * FROM `products`";
     $result = $conn->query($sql);

     if ($result->num_rows > 0){
         // Output data of each rowt
          while($row = $result->fetch_assoc()){
             //echo "Brand : " . $row["brand"] . " - Product : " . $row["name"] . " - " . $row["description"] . " - Price : " . $row["price"] . "<br>";
             echo    "<div class='col-lg-2.4 col-md-3.4 col-sm-4 col-xs-12 products " . $row['brandName'] . " all " . $row['product_range'] . "' id='products'>
                         <div class='hovereffect'>
                             <img class='img-responsive productimg' src='" . $row['img'] . "' alt=''>
                             <div class='overlay1'>
                                 <h2> " . $row['name'] . "</h2>
                                 <p> 
                                     " . $row['title'] . "
                                 <br>
                                 <br>
                                     " . $row['price'] . "
                                 <br>
                                 <a href='#'>
                                     Add To Cart 
                                 </a> 
                                 </p>
                             </div>
                             <div class='overlay2'>
                             <div class='overlay3'>
                                 <p> 
                                     " . $row['description'] . "
                                 </p>
                             </div>
                             </div>
                         </div>
                     </div>";

         }
     } else {
         echo "0 results";
     }
 ?>
                         </div>

这是我目前的jquery，但它只显示产品，还没有过滤它们。

$(document).ready(function(){
         $("#labelSelect").click(function(){
             $("#product_range").hide();
             $("#product_group").show();
             $("#product").show();

             $("." + $("input[type='radio'][name='selector']:checked")).show();
             $("products:not(." + $("input[type='radio'][name='selector']:checked") + ")").hide();
         });
     });

提前感谢您的帮助。