ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用してフォームアップロード要素を動的に追加および削除する方法 (デモソースコードのダウンロード付き)_jquery

jQuery を使用してフォームアップロード要素を動的に追加および削除する方法 (デモソースコードのダウンロード付き)_jquery

WBOY
リリース: 2016-05-16 15:19:54
オリジナル
1395 人が閲覧しました

この記事の例では、jQuery がフォーム アップロード要素を動的に追加および削除する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

実行中のエフェクトのスクリーンショットは次のとおりです:

ここをクリックしてオンラインデモをご覧ください。

具体的なコードは次のとおりです:

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(":input[type=button][value=more]").bind("click",function(){
 var $br = $("<br />");
 var $file = $("<input type='file' name='name1' />");
 var $button = $("<input type='button' value='delete'>");
 $(this).after($file).after($button).after($br);
 $button.bind("click",function(){
  $br.remove();
  $file.remove();
  $button.remove();
 })
 })
});
</script>
</head>
<body>
<input type="file" name="file1" /><input type="button" value="more" />
</body>
</html>

ログイン後にコピー

完全なサンプルコードについてはここをクリックしてくださいこのサイトからダウンロードしてください

この記事が jQuery プログラミングのすべての人に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート