jquery 配列要素 取得

Question

<input type="text" name="fname[]" id="fname[]" value=""> このタグは、同じフォーム内にいくつ存在するかは不明とします。

（質問１）
上記フォームの要素があった場合、textタグひとつひとつに対して、
この要素のonchangeイベントを
取得したいのですが、どのようにしたらいいですか？

要素名は、上のように配列にしたいです。

jQuery(document).ready(function($){
$('#fname').change(function() {
var str = $(this).val();
// ここに処理を書く
console.log(str);
});
});

（質問２）
また、
textタグの、nameやidを配列にしない場合に、なにか良案があるでしょうか？

よろしくお願いいたします。

Answer 1

まず、コードは<code>ボタンを押した際に出来るバッククオート三つの中に入れてくださいね。
編集の際、プレビューが右に出ますので、それを見ながらやるといいですね。

sakapunさんが言っておられるように、id属性はページ内でユニーク（一意）にしなければなりません。
ですので、配列のような書き方はできません。name属性はダブっても大丈夫です。

$(function() {
  $('input[name="fname[]"]').on('change', function(event) {
    var str = $(this).val();
    // ここに処理を書く
    console.log(str); 
  });
});

何らかの理由で$をグローバルで使っているのでない限り、短縮形の書き方でよいかと。
name属性セレクタを使うことで、要素を特定できます。

Answer 2

質問1と2を合わせてご回答いたします。
IDプロパティはそのように配列で記述するべきではないため、必ずそのページ内で一つの意味になる文字列を使用してください。
取り急ぎ、今回は修飾などにも使用しないため、IDプロパティは撤去いたします。

<input type="text" name="fname[]" value="">

jQuery(document).ready(function($){
  $('input[type="text"]').change(function(event) {
    var str = event.target.value;
    // ここに処理を書く
    console.log(str); 
  });
});

通例として、eventを引数と渡して、event.target.valueで値を操作するのが一般的です。