CSS表格中的復(fù)選框可以為表格添加交互功能,讓用戶可以選擇和操作表格的每一行或每一列。
table { border: 1px solid #ddd; border-collapse: collapse; } th, td { padding: 10px; text-align: left; } td input[type=checkbox] { margin-right: 5px; }
首先,我們需要定義一個包含邊框樣式的表格,并設(shè)置表格單元格的填充和水平對齊方式。
接著,在表格中的復(fù)選框設(shè)置樣式。我們?yōu)楸砀裰械拿總€單元格的復(fù)選框添加了一個 margin-right 樣式,以便與后面的文本內(nèi)容有一定的間距。
<tr> <td><input type="checkbox" id="select-all"></td> <td>Apple</td> <td>$1.00</td> </tr> <tr> <td><input type="checkbox"></td> <td>Orange</td> <td>$1.50</td> </tr> <tr> <td><input type="checkbox"></td> <td>Banana</td> <td>$0.50</td> </tr>
最后,在表格的每一行中添加一個包含復(fù)選框元素的單元格。首先創(chuàng)建一個用于全選所有復(fù)選框的主復(fù)選框,然后為每一行添加一個單獨的復(fù)選框。
當(dāng)用戶單擊主復(fù)選框時,所有行中的復(fù)選框都將選中。如果用戶取消選中主復(fù)選框,則所有行的復(fù)選框都將清除。
$(document).ready(function() { $('#select-all').click(function() { $('input[type=checkbox]').prop('checked', this.checked); }); });
最后,我們使用JavaScript代碼為主復(fù)選框添加事件偵聽器。當(dāng)用戶單擊主復(fù)選框時,我們使用jQuery選擇器選擇所有的復(fù)選框,并改變它們的狀態(tài)以與主復(fù)選框的狀態(tài)匹配。