Question

我正在创建一个电子商务网站，并且必须在li tag复选框内显示类别。我到目前为止所尝试的是我在下面写的。我无法获得输出。

我已经在li标签中这样写了，但是对我来说不起作用。

<li class="list-group-item list-group-item-action" id="categories"><input type="checkbox"></li>

下面附上完整的代码。

表单设计（HTML）

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

        <li class="list-group-item list-group-item-action" id="categories"><input type="checkbox"></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 id = data[i].id;
                 //  $(this).prepend($('<input type="checkbox"/>'));
                  $('#categories').append('<a href="#" cid= '+ id + '  class="list-group-item list-group-item-action">' + '<b>'+ data[i].catname + '<b>' + '</a>');
                }
            },
            error: function (xhr, status, error)
               {
                console.log(xhr.message)
            }

        });
    }

get_category.php

<?php
include("db.php");

$stmt = $conn->prepare("select id,cat_name,status from category where status = '1' order by id DESC");
$stmt->bind_result($id,$catname,$status);

if ($stmt->execute()) {
    while ( $stmt->fetch() ) {
        $output[] = array ("id"=>$id, "catname"=>$catname,"status"=>$status);
    }

    echo json_encode( $output );
}
$stmt->close();

//}

Answer 1

尝试一下：

<div><ul id="displayResults"></ul></div>

然后，在php文件中：

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=cat_'+catid+' class="list-group-item list-group-item-action"><b>'+ data[i].catname + '<b><input id="cat_'+ catid +'" type="checkbox" value="true" checked="true"></li>');
                }else{
                  $('#displayResults').append('<li id=cat_'+catid+' class="list-group-item list-group-item-action"><b>'+ data[i].catname + '<b><input id="cat_'+ catid +'" type="checkbox" value="true"></li>');
                }

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

Answer 2

我没有看到对函数getCategory的调用。还要在$('#categories').append(.<a href="#" cid= '+ id + ' class="list-group-item list-group-item-action"><input type="checkbox">' + '<b>'+ catname + '<b>' + '</a>');)

中插入复选框属性

这是我的复选框视图代码：

<script>
   $(document).ready(function(){

       getCategory();


    });

   function getCategory(){
    $.ajax({
        type:'GET',
        url: 'get_category.php' ,
        success: function (data)
        {
          var res = JSON.parse(data);
           for(var i = 0; i < res.length; i++) {
                var id = res[i].id;
                var catname = res[i].catname;
                $('#categories').append('<a href="#" cid= '+ id + '  class="list-group-item list-group-item-action"><input type="checkbox">' + '<b>'+ catname + '<b>' + '</a>');
            }
        },
        error: function (xhr, status, error)
           {
            console.log(xhr.message)
        }

    });
}


</script>

<div align="left">
     <ul class = "list-group">
    <li class="list-group-item list-group-item-action active" ><h4>Category</h4></li>

    <li class="list-group-item list-group-item-action" id="categories"></li>
    </ul>
</div>

希望这可以为您提供帮助。

如何在<li>标签jQuery中编写复选框

2 个答案: