无法使用 jquery 为每个复选框显示"li"标记文本

Question

我有一组复选框，每个复选框都与包含查询结果的"li"标签相关联，我也有按钮，所以我希望当我选中多个复选框并单击按钮时，我想为每个选定的复选框显示li标签的文本。当我单击一个复选框时，我已经成功地显示此数据，但是当我选中多个复选框时，它始终显示最后一个 li 文本。从下面的代码中，您会注意到"item"变量会崩溃旧文本并仅显示最后一个"li"文本，如何为每个复选框保留两个li文本。我希望你理解我的问题。任何帮助，不胜感激。

下面是一段代码：

PHP文件：

<script type="text/javascript">
$(document).ready(function(){
$('input[id^="DisplayCheckbox"]').on('click',function() 
{
            if($('input[id^="DisplayCheckbox"]:checked').length>=1)
  {
    parent = $(this).val();
    item = $(this).parents('#'parent).find("li.ListeGeom").text();
                alert(item);
            }else 
                alert(1);
        
});
 
    
});
        
</script>

外部 js 文件：

$("#Afficher").click( function()
  {
      
            $.each($('input[id^="DisplayCheckbox"]:checked'), function(){            
                alert(item);
            });
            
  });

Answer 1

如果没有看到随附的HTML结构，就会涉及一些猜测。但我认为你几乎就在那里，你只是使用了错误的 .each 版本。您需要$(selector).each(...语法 - 这将遍历 jQuery 实例中的匹配元素，而泛型$.each将迭代传统的数组或对象。

$.('input[id^="DisplayCheckbox"]:checked').each(function(index, element){
      alert(element.id);
});

有关更多详细信息，请参阅 https://api.jquery.com/each/

要找到 li 文本，还需要做更多的工作。同样，我看不到 HTML，但您找到它们的方式看起来既复杂又脆弱。您最好使用类或数据属性将它们相互关联，如下所示：

值为 1 的复选框：

<input id="DisplayCheckbox" value="1" type="checkbox"/>

关联的 li，其末尾有一个包含 1 的类：

<li class="querytext1">Content</li>

然后，查找关联的文本就变得微不足道了：

$.('input[id^="DisplayCheckbox"]:checked').each(function(index, element){
  alert($(".querytext" + element.value).text());
});

然后，您可以在点击事件中对每个复选框执行相同的操作：

$('input[id^="DisplayCheckbox"]').on('click', function() {
  if ($(this).prop("checked") == true) {
    alert($(".querytext" + this.value).text());
  }
});