如何使用 php 和 jquery 为每个关联的复选框检索 li 标签的文本

Question

我使用 php 动态创建了一组列表和复选框，对于我关联的每个 li 标签，我的问题是当我单击其关联的复选框时，我无法显示每个 li 标签的值。当我单击每个生成的复选框时，我得到了所有"li"标签的文本。你能帮我吗？这是我的代码：

echo '<ul>';
while ($row2 = pg_fetch_array($result2)) 
{
 echo '<div class="col-sm-10"><li class="Liste">' . $row2['nom'] . '</li>       <div class="checkbox">
  <label><input type="checkbox" id="DisplayCheckbox" value=""></label>
  </div></div><br />';
}
echo '</ul>';

在同一个php文件中，我添加了这个jquery代码：

<script type="text/javascript">
$(document).ready(function(){
         
    var itemValue= [];
        $('input[id^="DisplayCheckbox"]').on('click',function()
        {
          if($(this).is(":checked"))
          {
           listeItem = $(this).parents("div").find(".Liste").text();
               alert(listeItem);
          }
            
        });
        
    
});
        
</script>

Answer 1

jQuery的parents()会查看你所引用的元素的所有祖先。例如，您应该向包含li和复选框的每个div 添加一个唯一 id。

尝试：

echo '<ul>';
while ($row2 = pg_fetch_array($result2)) 
{

 echo '<div id="' . $row['nom'] . '" class="col-sm-10"><li class="Liste">' . $row2['nom'] . '</li>       <div class="checkbox">
  <label><input type="checkbox" id="DisplayCheckbox" value=""><input type="hidden" name="id" value="' . $row['nom'] . '"></label>
  </div></div><br />';
}
echo '</ul>';

和：

$('input[id^="DisplayCheckbox"]').on('click',function() {
        if($(this).is(":checked"))
            {
                parent = $(this).next('input[name="id"]').val();
                listeItem = $(this).parents('#' + parent).find(".Liste").text();
                alert(listeItem);
            }
});