[英]JavaScript - Function to change ul to display when checkbox is ticked
我有一個 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”的任何元素中查找任何勾號,這是否可能,我是否正在解決這個問題以正確的方式還是會有更好的方法?
您的代碼可以生成 1 個以上相同 ID 的元素 - 請避免這種情況。
如果您將類(例如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>
你可以像下面那樣做。
.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>
假設所有 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; }
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.