JavaScriptでコントロール値を変更する方法

JavaScript は、Web 開発やその他のアプリケーションの開発に使用できる、一般的に使用されるスクリプト言語です。 Web 開発では、通常、JavaScript は動的効果、フォーム検証、対話型操作の実装に使用されます。

この記事では、JavaScript がコントロール値を変更する方法について説明します。コントロール値とは、テキスト ボックス、ドロップダウン ボックス、ラジオ ボタンなどのフォーム要素の値を指します。これらのコントロールの値を変更すると、ボタンをクリックした後にフォームの内容を自動的に入力したり、ドロップダウン ボックスのオプションを変更したりするなど、いくつかの対話型操作を実装することができます。

1. テキスト ボックスの値を変更する

テキスト ボックスの値を変更するのは比較的簡単です。JavaScript でドキュメント オブジェクトの getElementById メソッドを使用して、テキスト ボックス要素を取得できます。 、その value 属性を使用して値を変更します。以下は例です:

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

2. ドロップダウン ボックスのオプションの変更

ドロップダウン ボックスのオプションを変更するには、select 要素とオプション要素。ドキュメント オブジェクトの getElementById メソッドを使用して select 要素を取得し、options 属性を使用してそのすべてのオプションを取得し、selectedIndex 属性を使用して選択されたオプションを変更できます。以下に例を示します:

<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. ラジオ ボタンの選択状態を変更する

ラジオ ボタンの選択状態を変更するには、radio 要素と selected 属性を使用する必要があります。ドキュメント オブジェクトの getElementById メソッドを使用してラジオ要素を取得し、checked 属性を使用してそのチェック状態を変更できます。以下は例です:

<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. チェック ボックスの選択状態を変更する

チェック ボックスの選択状態を変更するには、checkbox 要素と selected 属性を使用し、変更する必要があります。ラジオボタンの選択状態も同様です。ドキュメント オブジェクトの getElementById メソッドを使用してチェックボックス要素を取得し、checked 属性を使用してそのチェック状態を変更できます。以下に例を示します。

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

概要

この記事の導入部分を通じて、JavaScript がフォーム要素の値を簡単に変更できることがわかります。 Web 開発のプロセスでは、JavaScript を使用すると、よりインタラクティブな操作が実現し、ユーザー エクスペリエンスが向上します。同時に、フォーム要素の値を変更する場合は、予期しない問題を避けるために注意が必要であることに注意してください。

以上がJavaScriptでコントロール値を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。