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

Question

我有一个 javascript 函数可以从display:none;更改ul display:block; 当复选框被勾选时。

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将更改为display:block; ，我的问题是我希望在勾选任何复选框时显示ul ，而不是所有复选框。 我认为我的问题可能与所有具有相同 ID 的复选框有关，但我希望我可以改变我的功能，以便它在“removeFromGroup”的任何元素中查找任何勾号，这是否可能，我是否正在解决这个问题以正确的方式还是会有更好的方法？

Answer 1

1. 您的代码可以生成 1 个以上相同 ID 的元素 - 请避免这种情况。

2. 如果您将类（例如removeFromGroup ）添加到输入而不是 id 那么在 js 函数中您可以使用var dgcbt = document.querySelectorAll(".removeFromGroup")那么dgcbt将是输入的集合。

 function toggleDelbox() { var elems = document.querySelectorAll('.removeFromGroup'); var shouldShowList = false; elems.forEach(function(elem) { if (elem.checked) { shouldShowList = true; } }); document.querySelector('#remove-from-group-ul').style.display = shouldShowList ? '' : 'none'; }

 <input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="" onclick='toggleDelbox();'> <input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="" onclick='toggleDelbox();'> <input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value="" onclick='toggleDelbox();'> <ul id="remove-from-group-ul" style="display:none;" > <li>aaaa</li> <li>bbbb</li> </ul>

Answer 2

你可以像下面那样做。

这是一个测试

 .remove-from-group { display: none; } .removeFromGroup:checked~.remove-from-group { display: block; }

 <div> <input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value=""> <ul class="remove-from-group" id="remove-from-group-ul"> <li>This is a test</li> </ul> </div> <div> <input type="checkbox" name="removeFromGroup[]" class="removeFromGroup" value=""> <ul class="remove-from-group" id="remove-from-group-ul"> <li>This is a test</li> <li>This is a test</li> </ul> </div>

Answer 3

假设所有 ID 不应重复，您可以避免使用 Javascript 并使用CSS解析，方法是仅切换选中复选框后的第一个列表

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

作为旁注，列表内的输入应包含在list-item

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

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

Answer 4

ID必须是唯一的！

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

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

这是改进的标记和执行。 如果单击第一个删除按钮并确认批准，则表单将使用 group=group1 提交

 document.getElementById("groups").addEventListener("click", function(e) { var tgt = e.target; if (tgt.classList.contains("remove")) { document.getElementById(tgt.getAttribute("data-id")).classList.toggle("hide", this.checked) } else if (tgt.type === "submit") { if (!confirm("Delete from group")) e.preventDefault() } })

 .hide { display: none }

 <form> <div id="groups"> <input type="checkbox" name="removeFromGroup[]" class="remove" data-id="group1">Group 1 <div id="group1"> <button type="submit" name="group" value="group1">Delete from group</button> <input type="reset" value="Clear Selection"> </div> <input type="checkbox" name="removeFromGroup[]" class="remove" data-id="group2">Group 2 <div id="group2"> <button type="submit" name="group" value="group2">Delete from group</button> <input type="reset" value="Clear Selection"> </div> <input type="checkbox" name="removeFromGroup[]" class="remove" data-id="group3">Group 3 <div id="group3"> <button type="submit" name="group" value="group3">Delete from group</button> <input type="reset" value="Clear Selection"> </div> </div> </form>

这是匹配的PHP

<form>
  <div id="groups">
  foreach ($result as $group) { ?>        
    <input type="checkbox" name="removeFromGroup[]" class="remove" data-id="<?=$group ?>"><?= $group ?>
    <div id="<?= $group ?>">
      <button type="submit" name="group" value="<?= $group ?>">Delete from group</button> <input type="reset" value="Clear Selection">
    </div>
  <?php } ?>
  </div>
</form>