JavaScript 输入值更改

在 JavaScript 中，我们经常需要动态地更改用户输入的值。这可能是为了更新 UI，计算新的结果，或者执行其他操作。

更改输入框的值

要更改输入框的值，我们可以使用 value 属性。例如，在以下 HTML 中：

<input type="text" id="myInput">
<button onclick="changeTextInputValue()">更改值</button>

我们可以使用以下 JavaScript 函数更改输入框的值：

function changeTextInputValue() {
  document.getElementById("myInput").value = "新的值";
}

此代码会将输入框的值更改为字符串 "新的值"。请注意，我们使用 document.getElementById 获取输入框元素，然后使用 .value 设置其值。

更改选项的选中状态

要更改下拉列表或复选框的选中状态，我们可以使用 checked 属性。例如，在以下 HTML 中：

<input type="checkbox" id="myCheckbox" checked>
<button onclick="changeCheckbox()">更改选中状态</button>

我们可以使用以下 JavaScript 函数更改复选框的选中状态：

function changeCheckbox() {
  var checkbox = document.getElementById("myCheckbox");
  checkbox.checked = !checkbox.checked;
}

此代码会将复选框的选中状态更改为与当前状态相反的值。请注意，我们使用 document.getElementById 获取复选框元素，然后使用 .checked 属性设置或获取其选中状态。

在输入框中获取文本

有时我们需要获取输入框中的文本，以便进行处理或发送到服务器。要获取此文本，我们可以使用 value 属性。例如，在以下 HTML 中：

<input type="text" id="myInput">
<button onclick="getInputText()">获取文本</button>

我们可以使用以下 JavaScript 函数获取输入框中的文本：

function getInputText() {
  var input = document.getElementById("myInput");
  var text = input.value;
  alert(text);
}

此代码将获取输入框中的文本，然后使用 alert 函数在屏幕上显示它。

结论

JavaScript 提供了许多方法来更改和获取用户输入的值。无论您是要更新 UI、计算结果还是执行其他任务，这些技巧都可以派上用场。请记住使用 value 和 checked 属性，以及 document.getElementById 函数，从 DOM 中获取输入元素。