在JavaScript中显示多个复选框的值,可以通过以下步骤实现:
<form id="myForm">
<input type="checkbox" id="checkbox1" value="value1">
<label for="checkbox1">选项1</label><br>
<input type="checkbox" id="checkbox2" value="value2">
<label for="checkbox2">选项2</label><br>
<input type="checkbox" id="checkbox3" value="value3">
<label for="checkbox3">选项3</label><br>
</form>
querySelectorAll
方法选择所有选中的复选框,并遍历它们来获取值。例如:var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var values = [];
for (var i = 0; i < checkboxes.length; i++) {
values.push(checkboxes[i].value);
}
var resultElement = document.getElementById('result');
resultElement.textContent = '选中的值为:' + values.join(', ');
完整的示例代码如下:
<form id="myForm">
<input type="checkbox" id="checkbox1" value="value1">
<label for="checkbox1">选项1</label><br>
<input type="checkbox" id="checkbox2" value="value2">
<label for="checkbox2">选项2</label><br>
<input type="checkbox" id="checkbox3" value="value3">
<label for="checkbox3">选项3</label><br>
</form>
<p id="result"></p>
<script>
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var values = [];
for (var i = 0; i < checkboxes.length; i++) {
values.push(checkboxes[i].value);
}
var resultElement = document.getElementById('result');
resultElement.textContent = '选中的值为:' + values.join(', ');
</script>
这样,当用户选中复选框后,页面上会显示选中的复选框的值。
领取专属 10元无门槛券
手把手带您无忧上云