在多個文本框上同時應用onkeyup功能

Question

假設我有一列1 + 7的文本框。第一個框的名稱是mm1，其他框分別是dd1，dd2，...，dd7。我想寫一個javascript函數，以便將文本框dd1，dd2，...，dd7中的所有值都乘以N，如果我將第一個文本框（即mm1）置於N中。我可以編寫JavaScript函數，但如何在所有框中同時生效？我已經嘗試了下面的代碼。但它只能影響一個盒子，具體取決於$ i的值。如果我們可以爲$ i創建一個取值爲1到7的循環，那麼問題可能會得到解決。任何線索請。

<?php $i=3?> 
<input type="text" size="1" id="mm1" name="mm1" 
maxlength="2" onfocus="this.select()"  
onkeyup="gft('dd<?php echo $i?>', 'mm1')" 
> 

Answer 1

試試這個，使用類邏輯組元素...

$('.mult').each(function(i,v){ 
      var tt = parseFloat($(this).val()); 
      $(this).attr('data-val',$(this).val()); 
}); 
$('.myVal').on('keyup',function(e){ 
    var t = $(this).val(); 
    if(!t) t = 0; 
    $('.mult').each(function(i,v){ 
      if(t>0){ 
       var tt = parseFloat($(this).attr('data-val')) * t; 
       $(this).val(tt); 
      } 
    }); 
}); 

查找工作撥弄here

Answer 2

我用只有JavaScript（jQuery的沒有）做了一個JSFiddle：

HTML

<input type="number" onkeyup="multiply(this)"/> 

<input type="number" value="1" class="multiply-this"/> 
<input type="number" value="2" class="multiply-this"/> 
<input type="number" value="3" class="multiply-this"/> 
<input type="number" value="4" class="multiply-this"/> 
<input type="number" value="5" class="multiply-this"/> 
<input type="number" value="6" class="multiply-this"/> 
<input type="number" value="7" class="multiply-this"/> 

的JavaScript

function multiply(first){ 
    var value = +first.value; 
    var textboxes = document.getElementsByClassName("multiply-this"); 

    for(var i = 0; i < textboxes.length; i++){ 
     var textbox = textboxes[i]; 

     if(textbox.attributes.initialValue){ 
      textbox.value = textbox.attributes.initialValue.value; 
     } else { 
      textbox.setAttribute("initialValue", textbox.value); 
     } 

     textbox.value = +textbox.value * value; 
    } 
} 

window.onload = function(){ 
    var textboxes = document.getElementsByClassName("multiply-this"); 

    for(var i = 0; i < textboxes.length; i++){ 
     var textbox = textboxes[i]; 
     textbox.onkeyup = function(){ 
       this.setAttribute("initialValue", this.value); 
     } 
    } 
} 

我添加的功能記住文本框曾在第一次什麼樣的價值。但是如果您專門更改了七個相乘的文本框中的一個，您仍然可以更改它。

編輯

您還可以，如果你希望它改變的一個值後，乘補充一點：

textbox.onblur = function(){ 
    multiply(document.getElementById("multiplyer")); 
} 

JSFiddle

Answer 3

function gft(x){ 
    n = 5; 
    c = x * n; 
    textInputs[0].value = c; 
    textInputs[1].value = c; 
    textInputs[2].value = c; 
} 

var textInputs = document.querySelectorAll('input[type=text]'); 
//this eventlistener is made to listen for key movement on all text fields that are of type text 
for(i=0;i<textInputs.length;i++){ 
    textInputs[i].addEventListener('keyup',function(){ 
     //gft will execute an equation whenever one of these fields change 
     //also, it will change all the values inside the textfield simultaneously 
     gft(this.value); 
    },false); 
}