读取输入值
访问文本框、复选框和选择框中的值。
读取输入值 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
处理表单数据
表单通过文本框、复选框、单选按钮和下拉菜单等字段收集用户输入。每种控件公开数据的方式略有不同。
input.value
类似文本的输入控件通过 value 属性公开当前内容，该属性始终是字符串。
const name = document.querySelector("#name");
console.log(name.value);value 始终是字符串
即使是数字输入控件返回的也是字符串。需要数字时，请显式进行转换。
const age = document.querySelector("#age");
const n = Number(age.value);valueAsNumber
数字和日期输入控件提供了 valueAsNumber，它会直接返回数字（为空或无效时返回 NaN）。
const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);checkbox.checked
复选框通过布尔属性 checked 报告自身状态，而不是通过 value。
const agree = document.querySelector("#agree");
console.log(agree.checked); // true or false单选按钮
对于一组单选按钮，请找到被选中的那个。checked 属性用于标识所选选项。
const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");select 的值
单选下拉菜单通过 value 暴露所选选项。
const country = document.querySelector("#country");
console.log(country.value);多选
对于多选控件，请读取 selectedOptions，然后映射到各个值。
const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);input 事件
监听 input 事件，即可对每次按键或值的变化做出实时响应。
name.addEventListener("input", (e) => {
console.log(e.target.value);
});change 事件
字段的值发生变化后失去焦点时，change 事件会触发；对于复选框和选择框，它会立即触发。
country.addEventListener("change", (e) => {
console.log("chose " + e.target.value);
});FormData
FormData 一次收集表单中所有带名称的字段，非常适合发送到服务器。
const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));快速检查
正确读取复选框。
回顾
通过 value 读取文本输入（始终是字符串；数字应使用 valueAsNumber），通过 checked 读取复选框和单选按钮，通过 value 或 selectedOptions 读取下拉菜单。使用 input 事件响应每次变化，或使用 change 事件响应确认后的变化，并使用 FormData 一次收集所有数据。
常见问题解答
「读取输入值」课时是免费的吗？
是的 — 「读取输入值」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「读取输入值」这节课中我会学到什么？
访问文本框、复选框和选择框中的值。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「读取输入值」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。