A<label>
标记单个表单控件。如果要为一组表单控件提供“标签”,请使用带有图例的字段集。
<fieldset>
<legend> Select lists </legend>
<input type="checkbox" name="group" id="group1" value="1"><label for="group1">Main List</label>
<input type="checkbox" name="group" id="group2" value="2"><label for="group2">Secondary List</label>
</fieldset>
如果您想提供“检查所有”功能,那么您需要使用 JavaScript。
例如:
<fieldset>
<legend> Select lists </legend>
<input type="checkbox" name="group" id="group1" value="1"><label for="group1">Main List</label>
<input type="checkbox" name="group" id="group2" value="2"><label for="group2">Secondary List</label>
<input type="checkbox" name="group" id="all" value="all"><label for="all">Check all</label>
</fieldset>
和
function checkAll() {
var boxes = this.parentNode.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = this.checked;
}
}
document.querySelector('[value="all"]').addEventListener('change', checkAll);
(与不支持的旧浏览器的兼容性querySelector
留给读者作为练习)