Jquery 无法按ID从输入字段中获取值

我有如下表单字段：

<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage[]' style='width:40px;' type='text' />
<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage1" + counter + "' style='width:40px;' type='text' />
<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage2" + counter + "' style='width:40px;' type='text' />
<input name='task_complete_percentage[]' value='' onchange='' class='percent' id='task_complete_percentage3" + counter + "' style='width:40px;' type='text' />

但只有第一个字段起作用，但如果这样做，我可以看到所有值。我做错了什么

 $("#addElement").click(function(){             
 $('[id *= "task_complete_percentage"]').each( function () {
   console.log('test');
 }); 
  });

试着这样使用--

---

似乎不需要ID参数——我们可以使用其他参数/技术通过jQuery来处理这些字段

<div id="task_complete_percentage_fields">
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
</div>
<div id="output"></div>
<div id="addElement">Add another row</div>

字段是动态添加的，我希望对所有值求和

// Init the Sum Variable
var percentageSum = 0;

// Create a Function to Tally the Percentages
function sumPercentages(){
  // Reset the Sum
  percentageSum = 0;
  // Loop through the Fields
  $('#task_complete_percentage_fields input.percent').each(function(k,v){
    var $v = $(v);
    // Strip non-numerals
    $v.val( $v.val().replace( /\D/g , '' ) );
    // Sum the Percentages
    percentageSum += 1*$(v).val();
  });
  // Output the Sum
  $('#output').text( percentageSum );
}

$(document).ready(function(){

    // Attach a delegated live event to the fields within the div
    $('#task_complete_percentage_fields').on( 'change' , 'input.percent' , function(){
      sumPercentages();
    });

    // You can also call the same function from any other function
    $('#addElement').click(function(){
      $('#task_complete_percentage_fields')
        .append("<input name='task_complete_percentage[]' value='' class='percent' type='text' />");
      sumPercentages();
    });

    sumPercentages();

});

//初始化Sum变量
var percentageSum=0；
//创建一个函数来统计百分比
函数sum（）{
//重置总数
百分比总和=0；
//在田野里兜圈子
$（“#任务_完成_百分比_字段输入.百分比”）。每个（函数（k，v）{
var$v=$（v）；
//带非数字
$v.val（$v.val（）。替换（/\D/g，”）；
//把百分比加起来
percentageSum+=1*$（v）.val（）；
});
//输出总和
$（“#输出”）.text（百分比总和）；
}
$（文档）.ready（函数（）{
//将委派的实时事件附加到div中的字段
$（“#任务_完成_百分比_字段”）。在（'change'，'input.percent'，function（）上{
SUM百分比（）；
});
//您也可以从任何其他函数调用相同的函数
$（'#addElement'）。单击（函数（）{
$（“#任务_完成_百分比_字段”）
.附加（“”）；
SUM百分比（）；
});
SUM百分比（）；
});

---

请在JSFiddle查看此选项-

您的选择器有什么特别的原因吗？为什么不试试

$（'task\u complete\u percentage'）

？好的，我现在在HTML中看到ID是不同的。那么，为什么不为这些元素中的每一个使用CSS类，并按照Gavin的建议通过类名访问它们呢？似乎也是无效的HTML

id='task\u complete\u percentage[]”+counter+“'

获得相同的结果aswell@Stefan对不起，我的错误第一个元素没有计数器

<div id="task_complete_percentage_fields">
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
  <input name='task_complete_percentage[]' value='' class='percent' type='text' />
</div>
<div id="output"></div>
<div id="addElement">Add another row</div>

#task_complete_percentage_fields input.percent { width:40px }

// Init the Sum Variable
var percentageSum = 0;

// Create a Function to Tally the Percentages
function sumPercentages(){
  // Reset the Sum
  percentageSum = 0;
  // Loop through the Fields
  $('#task_complete_percentage_fields input.percent').each(function(k,v){
    var $v = $(v);
    // Strip non-numerals
    $v.val( $v.val().replace( /\D/g , '' ) );
    // Sum the Percentages
    percentageSum += 1*$(v).val();
  });
  // Output the Sum
  $('#output').text( percentageSum );
}

$(document).ready(function(){

    // Attach a delegated live event to the fields within the div
    $('#task_complete_percentage_fields').on( 'change' , 'input.percent' , function(){
      sumPercentages();
    });

    // You can also call the same function from any other function
    $('#addElement').click(function(){
      $('#task_complete_percentage_fields')
        .append("<input name='task_complete_percentage[]' value='' class='percent' type='text' />");
      sumPercentages();
    });

    sumPercentages();

});