How to change control value in javascript

JavaScript is a commonly used scripting language that can be used for web development and the development of other applications. In web development, JavaScript is usually used to implement dynamic effects, form validation, and interactive operations.

This article discusses how JavaScript changes the control value. The control value refers to the value in the form element, such as text box, drop-down box, radio button, etc. Changing the values ​​of these controls can be used to implement some interactive operations, such as automatically filling in form content after clicking a button or changing drop-down box options.

1. Change the value of the text box

Changing the value of the text box is relatively simple. You can use the getElementById method of the document object in JavaScript to obtain the text box element, and use its value attribute to change its value. . The following is an example:

// 获取id为username的文本框
var username = document.getElementById("username");
// 更改文本框的值为"John"
username.value = "John";

2. Changing the options of the drop-down box

To change the options of the drop-down box, you need to use the select element and the option element. You can get the select element using the getElementById method of the document object, get all its options using the options attribute, and change the selected option using the selectedIndex attribute. The following is an example:

<select id="fruits">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<script>
// 获取id为fruits的下拉框
var fruits = document.getElementById("fruits");
// 将选中的选项更改为第二个选项
fruits.selectedIndex = 1;
</script>

3. Change the selected state of the radio button

Changing the selected state of the radio button requires the use of the radio element and the checked attribute. You can get the radio element using the getElementById method of the document object, and change its checked status using the checked attribute. The following is an example:

<input type="radio" name="gender" id="male" value="male"> Male
<input type="radio" name="gender" id="female" value="female"> Female

<script>
// 获取id为female的单选按钮
var female = document.getElementById("female");
// 将其选中状态更改为true
female.checked = true;
</script>

4. Change the selected state of the check box

Changing the selected state of the check box requires the use of the checkbox element and checked attribute, and changing the selected state of the radio button similar. You can get the checkbox element using the getElementById method of the document object, and change its checked state using the checked attribute. Here is an example:

<input type="checkbox" id="fruits1" value="apple"> Apple
<input type="checkbox" id="fruits2" value="banana"> Banana
<input type="checkbox" id="fruits3" value="orange"> Orange

<script>
// 获取id为fruits2的复选框
var fruits2 = document.getElementById("fruits2");
// 将其选中状态更改为true
fruits2.checked = true;
</script>

Summary

Through the introduction of this article, we can see that JavaScript can easily change the value of form elements. In the process of web development, using JavaScript can achieve more interactive operations and improve user experience. At the same time, it should be noted that changing the values ​​of form elements requires caution to avoid unpredictable problems.

The above is the detailed content of How to change control value in javascript. For more information, please follow other related articles on the PHP Chinese website!