Abdul Waheed Abdul Waheed - 2 months ago 7
Ajax Question

How to show check box text if it is not next to check box using Jquey

I am trying to achieve checked value text should visible like shown in the image:

 image here

Without refresh or any click can anyone help me out?

This is my php dynamic from :

<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>


This is my sript to show the text:

<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>


Out put id:
<a id="selectedfood"></a></li>

Answer

You could try to get all checked options’ text on checkbox change event and append selected values to “selectedfood”. The following sample code is for your reference.

<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>