Comment changer la valeur du contrôle en javascript

JavaScript est un langage de script couramment utilisé qui peut être utilisé pour le développement Web et le développement d'autres applications. Dans le développement Web, JavaScript est généralement utilisé pour implémenter des effets dynamiques, la validation de formulaires et des opérations interactives.

Cet article explique comment JavaScript modifie les valeurs de contrôle. Les valeurs de contrôle font référence aux valeurs dans les éléments de formulaire, tels que les zones de texte, les zones déroulantes, les boutons radio, etc. La modification des valeurs de ces contrôles peut être utilisée pour implémenter certaines opérations interactives, telles que le remplissage automatique du contenu d'un formulaire après avoir cliqué sur un bouton ou la modification des options de la liste déroulante.

1. Changer la valeur de la zone de texte

Changer la valeur de la zone de texte est relativement simple Vous pouvez utiliser la méthode getElementById de l'objet document en JavaScript pour obtenir l'élément de la zone de texte et utiliser son attribut value pour le modifier. sa valeur. Voici un exemple :

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

2. Modification des options de la liste déroulante

La modification des options de la liste déroulante nécessite l'utilisation d'éléments de sélection et d'éléments d'option. Vous pouvez obtenir l'élément select à l'aide de la méthode getElementById de l'objet document, obtenir toutes ses options à l'aide de l'attribut options et modifier l'option sélectionnée à l'aide de l'attribut selectedIndex. Voici un exemple :

<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. Changer l'état sélectionné du bouton radio

Changer l'état sélectionné du bouton radio nécessite l'utilisation de l'élément radio et de l'attribut coché. Vous pouvez obtenir l'élément radio à l'aide de la méthode getElementById de l'objet document et modifier son statut vérifié à l'aide de l'attribut vérifié. Voici un exemple :

<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. Changer l'état sélectionné de la case à cocher

Changer l'état sélectionné de la case à cocher nécessite l'utilisation de l'élément checkbox et de l'attribut coché, ce qui est similaire à la modification de l'état sélectionné d'un bouton radio. Vous pouvez obtenir l'élément checkbox à l'aide de la méthode getElementById de l'objet document et modifier son état coché à l'aide de l'attribut coché. Voici un exemple :

<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>

Résumé

Grâce à l'introduction de cet article, nous pouvons voir que JavaScript peut facilement modifier la valeur des éléments de formulaire. Dans le processus de développement Web, l'utilisation de JavaScript peut réaliser des opérations plus interactives et améliorer l'expérience utilisateur. Dans le même temps, il convient de noter que la modification des valeurs des éléments de formulaire nécessite de la prudence pour éviter des problèmes imprévisibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!