のように見えるが、画像に示されている必要があります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

あなたは、すべてのチェックを取得しようとする可能性がありオプションのチェックボックスのテキストを変更し、選択した値を「選択済み」に追加します。次のサンプルコードは参考用です。

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