<div><label for="group">Select lists</label></div>
<div>
<input type="checkbox" name="group" id="group1" value="1" title="Main List" />
<label for="group1">Main List</label>
<input type="checkbox" name="group" id="group2" value="2" title="Secondary List" />
<label for="group2">Secondary List</label>
<label for="group1 group1">Check All</label>
</div>
无论如何,有没有使用for=...
属性来定位标签,还是需要分配一个id
?
甲<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
留给读者练习)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句