jqueryは複数の入力を追加します

フロントエンド開発では、jQueryを利用することで入力ボックスを動的に追加する機能を簡単に実装できます。この機能は、ユーザーが複数のコンテンツを入力する必要がある場合に非常に便利で、アプリケーションをより柔軟にし、ユーザーのニーズを満たし、ユーザー エクスペリエンスを向上させることができます。ここではjQueryを使って複数の入力ボックスを追加する方法を紹介します。

基本的なアイデア

私たちの目標は複数の入力ボックスを動的に追加することなので、最初に基本的なアイデアを決定する必要があります。ページにボタンを追加します。ユーザーがボタンをクリックすると、新しい入力ボックスが動的に生成されます。さらに、入力ボックスのいくつかのプロパティとスタイルを定義する必要もあります。

ステップ 1: HTML 部分

まず、HTML コードに新しい入力ボックスを収容するボタンとコンテナを追加します。コンテナは、

タグ、または タグを持つタイプ「text」の要素にすることができます。

入力ボックスを追加

ご覧のとおり、ボタンとコンテナの ID を定義しました。これは後続の JavaScript コードで使用されます。

ステップ 2: CSS パート

入力ボックスを動的に追加する必要があるため、他の入力ボックスと同じように見えるように、新しい入力ボックスのスタイルと属性を定義する必要があります。

input-container input {

margin-bottom: 10px;
display: block;
}

ここで、新しい入力のスタイルを定義します。ボックスには、下マージンとブロックレベルの表示プロパティが設定されます。

ステップ 3: jQuery コード パート

これで、新しい入力ボックスを動的に追加する機能を実装する jQuery コードを作成できます。

$(ドキュメント).ready(function() {
$("#add-input").click(function() {

$("#input-container").append('<input type="text" name="input[]" />');

});
} );

まず、document.ready イベントを使用して、ページの読み込み後にコードが実行されるようにします。次に、ボタンのクリック イベントを定義します。これにより、ボタンがクリックされたときにコンテナに新しい入力ボックスが追加されます。ここでは、jQuery の append() メソッドを使用して、HTML 構文を使用してコンテナに新しい入力ボックスを追加します。

さらに、新しい入力ボックスの名前を「input[]」として設定します。これにより、バックグラウンドの PHP コードでの処理が容易になります。

最後に、新しく追加した入力ボックスを削除するコードを追加します。

$(document).on('click', '.remove-input', function( ) {
$(this).parent().remove();
});

このコードは、追加する各入力ボックスのクリック イベントを定義します。ユーザーがクリックしたとき、削除ボタンをクリックしたときを選択すると、入力ボックスが削除されます。

概要

この記事では、jQuery を使用して、複数の入力ボックスを動的に追加する機能を完成させます。 jQuery は、さまざまなインタラクションをより簡単に実現し、ユーザー エクスペリエンスを向上させる非常に強力なツールです。この記事のコードを変更すると、独自のアプリケーションにより適したものにすることができます。

以上がjqueryは複数の入力を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。