JavaScript 通过 id 获取输入值 - HTML

在前端开发中，我们经常需要通过用户输入获取对应的值。在 HTML 中，通过 id 属性可以给元素赋予唯一的标识符，而在 JavaScript 中，我们可以通过这个标识符来获取元素的值。

获取输入框的值

const input = document.getElementById('input-id');
const value = input.value;

以上代码演示了如何通过 ID 获取输入框的值。我们首先使用 document.getElementById 方法获取元素，并将其赋值给一个变量，然后使用 value 属性获取输入框的值。

需要注意的是，输入框的值始终是一个字符串。如果需要将其转换为数字等其他类型，可以使用相应的转换方法。

获取下拉列表的值

const select = document.getElementById('select-id');
const selectedValue = select.options[select.selectedIndex].value;

以上代码演示了如何通过 ID 获取下拉列表的选中值。我们首先使用 document.getElementById 方法获取下拉列表元素，并将其赋值给一个变量。然后，我们通过 options 属性获取所有选项对象的集合，并通过 selectedIndex 属性获取选中项的索引值。最后，我们使用 value 属性获取选中项的值。

需要注意的是，如果希望获取选中项的文本，可以使用 text 属性。

获取单选框和复选框的值

const checkbox = document.getElementById('checkbox-id');
const isChecked = checkbox.checked;

以上代码演示了如何通过 ID 获取复选框的选中状态。我们首先使用 document.getElementById 方法获取复选框元素，并将其赋值给一个变量。然后，我们使用 checked 属性获取复选框是否选中的布尔值。

需要注意的是，单选框和复选框都属于表单元素。因此，获取它们的值的方法与获取输入框的值类似。

总结

通过本文，我们学习了如何通过 id 获取输入框、下拉列表、单选框和复选框的值。这些方法在前端开发中是非常实用的，可以帮助我们获取用户输入，进一步处理和展示数据。