CSS復選框是一種常見的表單元素,它允許用戶選擇多個選項。如何在CSS中實現復選框的全選功能呢?下面介紹兩種方法。
方法一:使用JavaScript
<script> function selectAll() { var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for(var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } </script> <button onclick="selectAll()">全選</button> <br> <input type="checkbox">選項1<br> <input type="checkbox">選項2<br> <input type="checkbox">選項3
方法二:使用CSS
<input type="checkbox" id="check-all"> <label for="check-all">全選</label> <br> <input type="checkbox">選項1<br> <input type="checkbox">選項2<br> <input type="checkbox">選項3 <style> #check-all:checked ~ input[type="checkbox"] { /*選中所有復選框*/ display: none; } #check-all:checked ~ input[type="checkbox"] + label { /*隱藏所有標簽*/ display: none; } #check-all:checked ~ label[for="check-all"]::after { /*在全選標簽后添加選中狀態*/ content: "?"; } </style>
以上兩種方法都可以實現CSS復選框的全選功能,具體使用哪種方法取決于個人喜好和實現場景。希望本文對大家有所幫助!