если я нажму на кнопку-флажок, релевантный результат не будет отображаться с помощью jquery ajex

Question

Я создаю сайт электронной коммерции. если я нажимаю на категорию в поле, соответствующий продукт должен отображаться. но результат отображается неопределенным. что я пробовал до сих пор, я написал это ниже. Например, если выбрать категорию как ТВ на флажок. Телевизионный продукт должен отображаться. У меня проблемы с JQuery. Можете ли вы проверить JQuery, если я пишу правильно или нет флажок нажмите часть .

Форма Дизайн

Категория

  <div align="left" >
            <li class="list-group-item list-group-item-action active" ><h4>Categories</h4></li>
            <li  id="displayResults" class="list-group-item list-group-item-action">
            </li>
        </div>

JQuery

 function getCategory(){
        $.ajax({
            type: 'GET',
            url: 'get_category.php' ,
            dataType: 'JSON',
            success: function (data)
            {
                for (var i = 0; i < data.length; i++)
                {
                    var catname = data[i].catname;
                    var catid = data[i].id;
                    var catstatus = data[i].status;
                    if(catstatus){
                        $('#displayResults').append('<li id='+catid+' class="list-group-item list-group-item-action"><input id="cat_id'+ catid +'" type="checkbox" value="true" > '+ '  '   + ' <b>'+ data[i].catname + '<b></li>');
                    }else{
                        $('#displayResults').append('<li id='+catid+' class="list-group-item list-group-item-action"><b>'+ data[i].catname + '<b><input id="cat_'+ catid +'" type="checkbox" ></li>');
                    }

                }
            },
            error: function (xhr, status, error)
            {
                console.log(xhr.message)
            }
        });
    }

Флажок нажмите

$(document).ready(function() {

    $('#displayResults').click(function(){

        var cat = $('#cat_id').attr('checked');

        alert(cat);

        $.ajax({
                url: 'get_product.php',
                type: 'POST',
                data: {cat: cat},
            success: function(data){

                 var len = data.length;
                    console.log(data);
                    $("#Products").empty();
                    for (var i = 0; i < data.length; i++) {
                        var price = data[i].price;
                        var image = data[i].image;
                        var description = data[i].description;
                        $("#Products").append("<div class='col-md-4'> " +
                        "<div class='panel panel-info' id='Products'>" +
                        "<div class='card-body'>" +
                        "<div class='panel-heading'>" + "<h4> " + description + "</h4> " +
                        "<p class='panel-body'>" + "<h3> " + price + "</h3>" +
                        "<p class='panel-body'> <img class='card-img-top' style='width:250px' height='250px' id='theImg' src='images/" + image + "' /> </p>" +
                        " <a href='#' class='btn btn-primary'>View More</a> </div> </div></div> </div>");
                    }
            }
        });
    });

});

get_product.php

<?php
include("db.php");
$stmt = $conn->prepare("select id,cat_id,brand_id,price,description,image,keywords from products where cat_id = ? order by RAND() LIMIT 0,6");
$stmt->bind_result($id,$cat_id,$brand_id,$price,$description,$image,$keywords);

 $cid = $_POST["cat"];
$stmt->bind_param("s", $cid);
$stmt->bind_result($id,$cat_id,$brand_id,$price,$description,$image,$keywords);

if ($stmt->execute()) {
    while ( $stmt->fetch() ) {
        $output[] = array ("id"=>$id, "cat_id"=>$cat_id,"brand_id"=>$brand_id,"price"=>$price,"description"=>$description,"image"=>$image,"keywords"=>$keywords);
    }
    echo json_encode($output);
}
$stmt->close();
?>

Answer 1

$ ("# cat_id") используется неправильно.Существует много категорий, в которых идентификатор вашей категории определяется как id = "cat_id '+ catid +'".

Я полагаю, вам нужно установить один флажок.если это так, то будет лучше, если вы используете радио типа ввода.

Но так как у вас есть флажок, то вы можете сделать так

 $(":checkbox").each(function(){
            if($(this).is(':checked')){
                cat=$(this).val();
                alert(cat);
            }
        });

, если вы хотите выбрать несколько флажков make catкак массив, а затем передать его в поле данных.