JavaScript-勾选复选框时将ul更改为显示的函数

我有一个javascript函数，可以将ul从display更改为：none；显示：块；勾选复选框时

function toggleDelbox(){
    var dgcbt = document.getElementById("removeFromGroup")
    if(dgcbt.checked){
       document.getElementById("remove-from-group-ul").style.display = "block";
    } else {
        document.getElementById("remove-from-group-ul").style.display = "none";
   }
}

该复选框可以在每个显示的组中找到-返回的组基于一个数组中的搜索结果，并在旁边显示一个复选框。我在数组中循环如下：

foreach ($result as $group) { 
?><input type="checkbox" name="removeFromGroup[]" id="removeFromGroup" value="<?php echo "$group"?>" onclick='toggleDelbox();'> <?php echo "$group"; echo "<br>";}
<br>
<ul class="remove-from-group" id="remove-from-group-ul" name="remove-from-group-ul">
<input type="submit" value="Delete from group" onclick="return confirm('Are you sure you want to delete the user from the selected group(s)?')" />  <input type="reset" value="Clear Selection">
</ul>

---

因此，如果我勾选所有复选框，我的ul更改将显示：block；，我的问题是我希望ul在勾选任何复选框时显示，而不是所有复选框。我认为我的问题可能与所有具有相同ID的复选框有关，但我希望我可以更改我的函数，以便它在任何removeFromGroup元素中查找任何勾号，这可能吗？我是以正确的方式解决这一问题还是有更好的方法？

如果所有ID都不应重复，您可以避免使用Javascript并使用CSS进行解析，只需切换选中复选框后的第一个列表

#removeFromGroup + br + ul { display: none; }
#removeFromGroup:checked + br + ul { display: block; }

作为旁注，列表中的输入应包含在列表项中

如果您要通过添加计数器来更改id，如我下面的评论所示，您仍然可以使用CSS

[id^="removeFromGroup"] + br + ul { display: none; }
[id^="removeFromGroup"]:checked + br + ul { display: block; }

---

在不应复制所有ID的前提下，可以通过仅切换选中复选框后的第一个列表来避免使用Javascript和CSS解析

#removeFromGroup + br + ul { display: none; }
#removeFromGroup:checked + br + ul { display: block; }

作为旁注，列表中的输入应包含在列表项中

如果您要通过添加计数器来更改id，如我下面的评论所示，您仍然可以使用CSS

[id^="removeFromGroup"] + br + ul { display: none; }
[id^="removeFromGroup"]:checked + br + ul { display: block; }

ID必须是唯一的

而是使用数据属性、委托和类

此外，您的HTML是非法的。您需要在UL中使用LIs，但不能使用复选框

下面是一个改进的标记和执行。如果单击第一个删除按钮且确认按钮已批准，则提交的表单将包含group=group1

document.getElementByIdgroups.AddEventListener单击，函数E{ var tgt=e.target； 如果tgt.classList.containsremove{ document.getElementByIdtgt.getAttributedata-id.classList.togglehide，this.checked }否则，如果tgt.type==提交{ if！confirmDelete从组e中删除。默认值 } } .隐藏{ 显示：无 } 第一组 从组中删除 第2组 从组中删除 第3组 从组中删除 ID必须是唯一的

而是使用数据属性、委托和类

此外，您的HTML是非法的。您需要在UL中使用LIs，但不能使用复选框

下面是一个改进的标记和执行。如果单击第一个删除按钮且确认按钮已批准，则提交的表单将包含group=group1

document.getElementByIdgroups.AddEventListener单击，函数E{ var tgt=e.target； 如果tgt.classList.containsremove{ document.getElementByIdtgt.getAttributedata-id.classList.togglehide，this.checked }否则，如果tgt.type==提交{ if！confirmDelete从组e中删除。默认值 } } .隐藏{ 显示：无 } 第一组 从组中删除 第2组 从组中删除 第3组 从组中删除

---

也许你可以像下面这样做

这是一个测试 .从组中删除{ 显示：无； } .removeFromGroup:选中~。从组中删除{ 显示：块； } 这是一个测试 这是一个测试 这是一个测试

---

也许你可以像下面这样做

这是一个测试 .从组中删除{ 显示：无； } .removeFromGroup:选中~。从组中删除{ 显示：块； } 这是一个测试 这是一个测试 这是一个测试 您的代码可以生成多个相同id的元素-请避免这种情况

如果将类ex.removeFromGroup而不是id添加到输入中，那么在js函数中可以使用var dgcbt=document.queryselectoral.removeFromGroup，那么dgcbt将是输入的集合

函数切换框{ var elems=document.queryselectoral'.removeFromGroup'； var shouldShowList=false； 前额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额{ 如果元素被选中{ shouldShowList=true； } }; document.querySelector'remove-from-group-ul'。style.display=shouldShowList？：'none'； } aaaa bbbb 您的代码可以生成多个相同id的元素-请避免这种情况

如果将类ex.removeFromGroup而不是id添加到输入中，那么在js函数中可以使用var dgcbt=document.queryselectoral.removeFromGroup，那么dgcbt将是输入的集合

函数切换框{ var elems=document.queryselectoral'.removeFromGroup'； var shouldShowList=false； 前额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额额{ 如果元素被选中{ shouldShowList=true； } }; document.querySelector'remove-from-group-ul'。style.display=shouldShowList？：'none'； } aaaa bbbb 这不是

---

---

一个PHP问题。请点击编辑，然后点击[]代码段编辑器并创建一个@mplungjan我真的很抱歉，但我不知道如何创建一个最小的可复制示例，该页面标题为“如何创建”的部分实际上没有告诉或显示如何创建？AndrewL64我不确定还需要什么html？这里唯一缺少的是，我启动一个表单，然后关闭表单？正如我所说：单击编辑，然后在对话框中按[]按钮，将HTML、CSS和JavaScript粘贴到相关窗格中。我已经用标记给出了一个答案，这对你来说会更好。检查我下面的答案，只是一个css实现，只有类，没有唯一的IDS。这不是一个PHP问题。请点击编辑，然后点击[]代码段编辑器并创建一个@mplungjan我真的很抱歉，但我不知道如何创建一个最小的可复制示例，该页面标题为“如何创建”的部分实际上没有告诉或显示如何创建？AndrewL64我不确定还需要什么html？这里唯一缺少的是，我启动一个表单，然后关闭表单？正如我所说：单击编辑，然后在对话框中按[]按钮，将HTML、CSS和JavaScript粘贴到相关窗格中。我已经给出了一个对你更有用的带有标记的答案，请检查下面我的答案，只是一个css实现，只有类，没有唯一的ID。ID是重复的，因为我的列表是从一个数组中构建的，该数组的值的数量会发生变化，所以我不知道如何将每个值设置为唯一的，然后在javascript中以其中任何一个为目标，因为我不知道ID。在一个页面中，您不应该多次使用ID，您在for循环中打印标记是非法的：使用计数器附加到id，例如id=removeFromGroupok，这样我的id将从Group1-removeFromGroup2等中删除。。。那么，我将如何在javascript中针对这些目标？可以给我一个通配符吗？例如document.getElementByIdremoveFromGroup*@a.smith对于此任务，您实际上应该只使用CSS。你确定需要使用JS吗？ID是重复的，因为我的列表是从一个数组中生成的，该数组的值的数量会发生变化，所以我不确定如何将每个值设置为唯一的，然后在javascript中以其中任何一个为目标，因为我不知道ID？你不应该在一个页面中多次使用ID，您在for循环中打印标记是非法的：使用计数器附加到id，例如id=removeFromGroupok，这样我的id将从Group1-removeFromGroup2等中删除。。。那么，我将如何在javascript中针对这些目标？可以给我一个通配符吗？例如document.getElementByIdremoveFromGroup*@a.smith对于此任务，您实际上应该只使用CSS。您确定需要使用JS吗？不，对于给定的标记，这将切换以下所有列表，不仅是第一个同级列表检查我的示例-我添加了两个列表和两个复选框，而且使用相同的类名只要为每个复选框和列表添加一个包装器，就可以了。你应该向OP强调包装器是必要的，因为他们没有使用它。是的，我同意。希望OP可以为每个块添加一个包装器。否，使用给定的标记，这将切换以下所有列表，不仅是第一个同级列表检查我的示例-我添加了两个列表和两个复选框，而且使用相同的类名只要为每个复选框和列表添加一个包装器，就可以了。你应该向OP强调包装器是必要的，因为他们没有使用它。是的，我同意。希望OP可以为每个块添加一个包装器。