jqueryは値をフォームに設定します

Web サイトまたはアプリケーションを開発している場合は、フォームにいくつかのデフォルト値を挿入したい場合があります。これは、フォームに入力する前にユーザーにサンプル入力を見てもらいたい、または以前の入力を再利用したいためである可能性があります。

理由が何であれ、jQuery を使用するとフォームの値を簡単に設定できます。この記事では、jQuery を使用してフォームの値を設定する方法といくつかの実践的な例を示します。

1. フォーム要素の取得

フォームの値の設定を開始する前に、まず、値を設定するフォーム要素を取得する必要があります。 jQuery セレクターを使用して取得できます。たとえば、フォーム入力の値を設定したい場合は、フォーム要素の ID 属性を選択することで値を取得できます:

var input = $('#my-input');

または、すべてのフォーム要素を選択することもできます:

var allInputs = $('input');

2. フォームの値を設定する

設定する必要があるフォーム要素を取得したら、.val() メソッドを使用してフォーム要素に値を挿入できます。たとえば、入力ボックスのデフォルト値を「Hello World」に設定する場合は、次のコードを使用できます。

$(document).ready(function(){
    $('#my-input').val('Hello World');
});

この例では、document.ready() 関数を使用して、ページの読み込みが完了したらコードを実行します。次に、フォーム入力要素の ID を選択し、.val() メソッドを使用してそれにデフォルト値を設定しました。

3. テキスト ボックス、ドロップダウン ボックス、およびラジオ ボタンの値を設定する

.val() メソッドを使用して、ほとんどの種類の値を設定できます。テキスト ボックス、ドロップダウン ボックス、ラジオ ボタン ボックスなどのフォーム。コード例を次に示します。

$(document).ready(function(){
    // 设置文本框的值
    $('#my-textbox').val('Some default text');
    
    // 设置下拉框的值
    $('#my-dropdown').val('Option 2');
    
    // 设置单选框的值
    $('input[name=my-radio]').filter('[value=2]').prop('checked', true);
});

この例では、ID #my-textbox、ID #my-dropdown、名前 my-radio を持つ要素をそれぞれ選択し、デフォルト設定を設定しました。それらの価値。

ラジオ ボタンの値を設定するときは、.filter() 関数を使用して指定されたオプションを選択し、.prop() メソッドを使用してそれを選択する必要があることに注意してください。

4. 複数選択ボックスの値の設定

ラジオ ボタンとは異なり、複数選択ボックスのデフォルト値の設定は少し面倒です。配列に設定する必要があります。以下は、複数選択ボックスのデフォルト値を設定する例です:

$(document).ready(function(){
    // 设置多选框的值
    var myValues = ['2', '3'];
    $('#my-checkbox').val(myValues);
});

この例では、選択される値を含む配列を作成し、それを複数選択ボックスに渡します。 .val() メソッド要素を使用します。

5. 概要

この記事では、jQuery を使用してフォームのデフォルト値を設定する方法を説明しました。テキスト ボックス、ドロップダウン ボックス、ラジオ ボタン、複数選択ボックスのいずれを設定する場合でも、.val() メソッドを使用してデフォルト値を簡単に設定できます。

このメカニズムにより、ユーザー エクスペリエンスが向上し、アプリケーションの再利用が容易になります。これらのヒントを使用すると、デフォルトのフォーム値をすばやく設定して、ユーザーの入力と操作を容易にすることができます。

以上がjqueryは値をフォームに設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。