JavaScriptで入力値を取得する方法

フロントエンド開発では、ユーザーが入力したデータを処理するために、通常、form要素の入力値を取得する必要があります。 JavaScript には入力値を取得するためのメソッドがいくつか用意されています。見てみましょう。

1. テキスト ボックスの入力値を取得する

テキスト ボックスは最も一般的なフォーム要素の 1 つであり、その入力値を取得するときに value 属性を使用できます。 getElementById メソッドを通じてテキスト ボックス要素を取得し、value 属性を使用して入力された値を取得できます。

サンプル コード:

<input type="text" id="myText">
<script>
    var inputVal = document.getElementById("myText").value;
    console.log(inputVal);
</script>

上記のコードでは、最初にテキスト ボックス要素を定義し、次に JavaScript を使用してその入力値を取得し、最後に値をコンソールに出力します。

2. 複数選択ボックスの入力値を取得する

複数選択ボックスは、通常、1 つ以上のオプションを選択するために使用されます。すべてのオプションをループすることで、その入力値を取得できます。選択。まず複数選択ボックスのすべてのオプションを取得し、次にすべてのオプションを反復処理し、checked 属性を通じてオプションのステータスを取得する必要があります。

サンプル コード:

<input type="checkbox" class="checkbox" value="apple">
<input type="checkbox" class="checkbox" value="orange">
<input type="checkbox" class="checkbox" value="banana">
<script>
    var checkboxes = document.getElementsByClassName("checkbox");
    var checkedVal = [];
    for(var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].checked){
            checkedVal.push(checkboxes[i].value);
        }
    }
    console.log(checkedVal);
</script>

上記のコードでは、まず複数の複数選択ボックス要素を定義し、getElementsByClassName メソッドを通じてすべての複数選択ボックス要素を取得します。次に、トラバースして各オプションのステータスを取得し、選択したオプションの値を配列に保存します。

3. ラジオ ボタン ボックスの入力値の取得

ラジオ ボタン ボックスの入力値の取得は、複数選択ボックスと似ています。また、ラジオ ボタン ボックスの要素を走査する必要があります。オプションのステータスを取得します。ただし、違いは、ラジオ ボタンでは一度に 1 つのオプションしか選択できないため、通常は name 属性を使用してラジオ ボタン要素をグループ化し、すべてのオプションを簡単に参照できることです。

サンプル コード:

<input type="radio" name="fruit" value="apple">
<input type="radio" name="fruit" value="orange">
<input type="radio" name="fruit" value="banana">
<script>
    var radios = document.getElementsByName("fruit");
    var checkedVal = null;
    for(var i = 0; i < radios.length; i++){
        if(radios[i].checked){
            checkedVal = radios[i].value;
            break;
        }
    }
    console.log(checkedVal);
</script>

上記のコードでは、最初にいくつかのラジオ ボタン要素を定義し、それらを name 属性でグループ化します。次に、トラバーサルを通じて現在の選択のステータスを取得し、オプションが選択されている場合は、その値をcheckedVal変数に保存します。

まとめ:

上記はフォーム要素の入力値の取得方法ですが、テキストボックス、複数選択ボックス、ラジオボタンの取得方法は異なりますが、すべては要素を走査し、特定の属性を渡して入力値を取得することによって行われます。どのような方法でも、フォーム要素の入力値を取得することは、ユーザー入力データを処理する際に必要なステップです。

以上がJavaScriptで入力値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。