Question

我有一个HTML表单，用户输入他/她打算花在几个任务上的时间：

<form>
<div class='row radio-online'>
  <div class='col-xs-2'>
    <input type='radio' name='time' id='minutes' value='minutes' />Minutes
  </div>
  <div class='col-xs-2'>
    <input type='radio' name='time' id='hours' value='hours' />Hours
  </div>
</div>
<div>
  <div><input type='text' name='time_task1' id='time_task1' value='' /></div>
  <div><input type='text' name='time_task2' id='time_task2' value='' /></div>
  <div><input type='text' name='time_task3' id='time_task3' value='' /></div>
</form>

我想要的是将输入的值转换为分钟或小时，具体取决于在广播组“时间”上选择的选项。我在jQuery中试过这个：

$("input[name='time']:radio").change(function() {
  if($("input:checked[name='time']:radio").val() == 'minutes') {
// this attempts to get every input that has an id starting with time_task
    $("[id^='time_task']").val($("[id^=time_task]").val() * 60);
  }
  else {
    $("[id^='mins']").val($("[id^=mins]").val() / 60);
  }
});

问题是，当我尝试这样做时，它确实进行了转换，但只转换了第一个输入的值，此外，它的值被复制到所有其他输入，但正确的是每个值都有它的值价值单独转换。我发现的例子就是这样，但不是我的情况。有什么建议吗？

Answer 1

这是因为当你做

时

$("[id^='time_task']").val($("[id^=time_task]").val() * 60);

选择器$("[id^='time_task']")返回多个元素但是一旦你使用.val()，它就会占用第一个元素。

相反，循环遍历集合中的每个元素，如下所示：

$("[id^='time_task']").each(function(){ $(this).val( $(this).val() * 60) })

Answer 2

尝试以下

$("input[name='time']:radio").change(function() {
  if ($("input:checked[name='time']:radio").val() == 'minutes') {
    $("[id^='time_task']").each(function(){
        $(this).val($(this).val() * 60);
    })
  }
  else {
    $("[id^='time_task']").each(function(){
        $(this).val($(this).val() / 60);
    })
  }
});

我们循环遍历每个字段并相应地设置其值。

将多个HTML输入更改为不同的值

2 个答案: