在单击提交按钮时获取复选框的值,可以通过以下步骤实现:
<form id="myForm">
<input type="checkbox" id="checkbox1" name="checkboxes" value="value1">
<label for="checkbox1">选项1</label><br>
<input type="checkbox" id="checkbox2" name="checkboxes" value="value2">
<label for="checkbox2">选项2</label><br>
<input type="checkbox" id="checkbox3" name="checkboxes" value="value3">
<label for="checkbox3">选项3</label><br>
<button type="button" onclick="getCheckboxValues()">提交</button>
</form>
querySelectorAll
方法选择所有选中的复选框,并遍历它们以获取值。function getCheckboxValues() {
var checkboxes = document.querySelectorAll('input[name="checkboxes"]:checked');
var values = [];
for (var i = 0; i < checkboxes.length; i++) {
values.push(checkboxes[i].value);
}
console.log(values); // 在控制台输出选中的复选框值
}
onclick
属性,并将函数名作为属性值来实现。<button type="button" onclick="getCheckboxValues()">提交</button>
这样,当用户点击提交按钮时,选中的复选框的值将被获取并输出到控制台中。你可以根据实际需求对获取到的值进行进一步处理,例如将其发送到服务器或在页面上展示。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云