I have a javascript function to change a ul
from display:none;
to display:block;
when the checkbox is ticked.
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";
}
}
The checkbox can be found against every group that gets displayed - the groups returned are based on a search that results in an array and to display them with a checkbox next to them i'm looping through the array like this:
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>
So with this if I tick all checkboxes my ul
changes to display:block;
, my problem is i want the ul
to display when ANY checkbox is ticked rather then all of them. I think my problem may have something to do with all the checkboxes having the same ID but i'm hoping i can alter my function so it looks for any tick in any of the elements "removeFromGroup", is this possible and am i tackling this in the right way or would there be a better approach?
Your code can produce more than 1 element of the same id - please avoid this.
if you would add class (ex. removeFromGroup
) to the input instead of id then in js function you could use var dgcbt = document.querySelectorAll(".removeFromGroup")
then dgcbt
would be a collection of inputs.
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>
You could do like below perhaps.
.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>
Premising that all the ID should not be duplicated you could avoid using Javascript and resolve with CSS
, by toggling only the first list after the checked checkbox
#removeFromGroup + br + ul { display: none; }
#removeFromGroup:checked + br + ul { display: block; }
As a side note, the input inside the list should be contained in a list-item
If you're going to change the id by appending a counter, as in my comment below, you can still use CSS
[id^="removeFromGroup"] + br + ul { display: none; }
[id^="removeFromGroup"]:checked + br + ul { display: block; }
IDs have to be unique!
Instead use data attributes, delegation and classes
Additionally your HTML is illegal. You need to use LIs in a UL but then you cannot have the checkboxes.
Here is an improved markup and execution. The form will be submitted with the group=group1 if the first delete button is clicked and the confirm approved
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>
Here is the PHP to match
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.