如果复选框文本不在复选框旁边，如何使用jQuery显示复选框文本

Question

我正在尝试实现检查值文本应该如图所示可见：

没有刷新或任何点击任何人都可以帮助我吗？

这是我的php动态来自：

<div class="products-row">
    <?php $tq=$conn->query("select * from os_tiffen where tiffen_status=1 order by id_tiffen ASC");
        while ($tiffen = $tq->fetch_assoc()) {
        ?>  
        <div class="col-md-3"> 
            <div class="foodmenuform row text-center">
                <input multiple="multiple" type="checkbox" id="<?php echo $tiffen['tiffen_image']; ?>" name="tifeen" hidden>
                <label for="<?php echo $tiffen['tiffen_image'];?>"><img src="img/tiffen/<?php echo $tiffen['tiffen_image']; ?>" class="img img-responsive" /></label>
                <h3 class="FoodName"><?php echo $tiffen['tiffen_name'];?></h3>
            </div>
        </div>
    <?php }  ?>
</div>

这是显示文字的脚本：

<script type="text/javascript" language="JavaScript">
    $( document ).ready(function() {
    var FoodMenu = $('input[type=checkbox]:checked').map(function(){
        return $(this).next('.FoodName').text();
    }).get().join("<br>");
    $("#selectedfood").html(FoodMenu);
});
</script>

输出ID：<a id="selectedfood"></a></li>

Answer 1

您可以尝试在复选框更改事件中获取所有选中选项的文本，并将所选值附加到“selectedfood”。以下示例代码供您参考。

<script>
$(function () {
    $(".foodmenuform [type='checkbox']").change(function () {

        var FoodMenu = "";
        var ischecked = $(".foodmenuform [type='checkbox']:checked").each(function () {

            FoodMenu += $(this).siblings(".FoodName").text() + "<br/>";
        })

        $("#selectedfood").html(FoodMenu);
    })
})
</script>

Answer 2

我觉得更容易谢谢：

var checkedFood = $('input[type=checkbox]:checked').map(function(){
//console.log($('input[type=checkbox]:checked').serialize());
return $(this).val();
}).get().join("<br>");
$("#selectedfood").html(checkedFood);

形式：

<div class="products-row">
<?php $tq=$conn->query("select * from os_tiffen where tiffen_status=1 order by id_tiffen ASC");
    while ($tiffen = $tq->fetch_assoc()) {
    ?>  
    <div class="col-md-3"> 
        <div class="foodmenuform row text-center">
            <input type="checkbox" id="<?php echo $tiffen['id_tiffen'];?>" class="Foodmenu" value="<?php echo $tiffen['tiffen_name'];?>" name="tifeen[]" hidden>
            <label for="<?php echo $tiffen['id_tiffen'];?>"><img src="img/tiffen/<?php echo $tiffen['tiffen_image']; ?>" class="img img-responsive" /></label>
            <h3><?php echo $tiffen['tiffen_name'];?></h3>
        </div>
    </div>
<?php }  ?>
</div>