PHP课程限时特价
PHP一对一教学
PHP全栈开发

js如何获取input的值

下次还敢   2024-05-16 16:36   767浏览 原创

对于不同类型的 input 元素,javascript 提供多种获取其值的方法:文本输入框和文本区域:使用 ".value" 属性获取值。提交按钮:在 "submit" 事件中使用 ".target.queryselector" 获取值。复选框:使用 ".checked" 属性获取选中状态。单选按钮:使用 ".name" 属性获取选中按钮的名称。文件输入框:使用 "change" 事件和 ".files" 属性获取选中的文件。

如何使用 JavaScript 获取 input 的值

JavaScript 提供了多种方法来获取 input 元素的值,具体方法取决于 input 元素的类型。

文本输入框 (type="text") 和文本区域 (type="textarea")

对于文本输入框和文本区域,可以使用以下方法获取值:

<code class="javascript">const inputValue = document.querySelector("input").value;</code>

按钮类型:文本输入框 (type="submit")

当用户点击提交按钮时,可以使用以下方法获取输入的值:

<code class="javascript">const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const inputValue = event.target.querySelector("input").value;
});</code>

复选框 (type="checkbox")

对于复选框,可以通过以下方法获取选中的值:

<code class="javascript">const checkboxValue = document.querySelector("input[type=checkbox]").checked;</code>

单选按钮 (type="radio")

对于单选按钮组,可以通过以下方法获取选中的值的名称:

<code class="javascript">const radioValue = document.querySelector("input[type=radio]:checked").name;</code>

文件输入框 (type="file")

对于文件输入框,可以使用以下方法获取选中的文件:

<code class="javascript">const inputElement = document.querySelector("input[type=file]");

inputElement.addEventListener("change", (event) => {
  const files = event.target.files;
});</code>

示例

以下是一个使用 JavaScript 获取 input 值的示例 HTML 代码:

<code class="html"><input id="text-input" type="text" value="Hello, world!"><button type="submit">获取值</button></code>

以下是一个获取文本输入框值的 JavaScript 代码:

<code class="javascript">const inputValue = document.querySelector("#text-input").value;
console.log(inputValue); // 输出:"Hello, world!"</code>
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。