jquery函數來總結具有2個類的文本框

我想使用jquery添加一組文本框。每個文本框都有一個類（class1）來使用引導進行設置。我添加了一個額外的類（class2）來運行jquery函數。以下是兩個文本框外觀的示例。jquery函數來總結具有2個類的文本框

<input type="text" class="class1 class2" name="textbox1" id="textbox1 /> 
<input type="test" class="class1 class2" name="textbox2" id="textbox2 />

這裏是我的jquery函數。 GrandTotal是保存總和的文本框的ID。

$('.class2').keyup(function() { 
    var sum = 0; 

    $('.class2').each(function() { 
    sum += Number($(this).val()); 
    }); 

    $('#GrandTotal').val(sum); 

});

它不工作。 #GrandTotal中沒有結果。有人能告訴我我做錯了什麼嗎？在此先感謝您的幫助。

cdr6800

來源

2016-02-28 cdr6800

這應該工作！ '＃GrandTotal'在哪裏？ –

#GrandTotal是保存總和的文本框的ID。它在html代碼中。當我更新textbox1或2時，GrandTotal確實發生了變化，但每當我點擊Tab鍵並繼續添加時，它都會改變。也許keyup不是正確的函數類型？謝謝。 – cdr6800

如果你想看看我在說什麼，你可以去https://www.pfacmeeting.org/badgeform2.php並在第一個數量文本框中輸入1。當您退出該選項框時，$ 50將投放到GrandTotal，但當您通過其他選項時，它會繼續向GrandTotal添加50美元。 – cdr6800

您必須驗證輸入的是數字，否則你將得到NaN（非數字）。 JavaScript有isNaN()函數用於檢查給定輸入是否爲NaN。

$('input.class2').keyup(function() { 
    var sum = 0; 

    $('input.class2').each(function() { 
    var value = Number($(this).val()); 
    if(!isNaN(value)) { 
     sum += value; 
    } 
    }); 

    $('#GrandTotal').val(sum); 
});

看到它在行動：https://jsfiddle.net/ibrahimeymenduran/ymnu9hf4/

來源

2016-02-28 15:16:35

你的HTML是無效的。

<input type="test" class="class1 class2" name="textbox2" id="textbox2 />

►類型= 「文本」而不是「測試」

►您沒有使用雙引號關閉ID。

$(document).ready(function() { 
 

 
    $('.class2').keyup(function() { 
 
    var sum = 0; 
 

 
    $('.class2').each(function() { 
 
     sum += Number($(this).val()); 
 
    }); 
 

 
    $('#GrandTotal').val(sum); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="class1 class2" name="textbox1" id="textbox1"> 
 
<input type=" text " class="class1 class2 " name="textbox2 " id="textbox2"> 
 
<input type=" text " name="textbox3 " id="GrandTotal">

來源

2016-02-28 15:18:14

沒關係。如果輸入元素的類型未提供或無效，那麼將被視爲文本。 –

是的......我明白了，但那僅僅是一個例子。我在實際案例中使用了「文本」。我剛剛有一個錯字。感謝您的發現，儘管。 – cdr6800

@RajaprabhuAravindasamy我只是指出了OP的錯誤，以便他可以改進。 :) –

你可以做到這一點，即使沒有jQuery的，在普通的JavaScript。

var GrandTotal = document.getElementById("GrandTotal"); 
 
var values = [0, 0]; 
 

 
function updateTotal(element, index) { 
 
    element.onkeyup = function() { 
 
    if (!isNaN(element.value)) { 
 
     values[index] = parseInt(element.value || 0); 
 
    } 
 
    GrandTotal.textContent = values[0] + values[1]; 
 
    } 
 
} 
 

 
Array.prototype.forEach.call(document.getElementsByClassName('class2'), updateTotal);

<input type="text" class="class1 class2" name="textbox1" id="textbox1" /> 
 
<input type="test" class="class1 class2" name="textbox2" id="textbox2" /> 
 
<p id="GrandTotal"></p>

Array.from(document.getElementsByClassName('class2')).forEach(updateTotal);讓你與class2類元素的數組。 forEach每個人都致電updateTotal。
updateTotal需要element這將是已更改的元素和index以指示它是否是<input/>的第一個或第二個。
Inside element.onkeyup我們檢查給定<input/>是否保存非NaN值。如果是這樣，我們把數字值（或0）放在values數組的適當位置上。然後我們更新#GrandTotal的文字。

這樣的#GrandTotal值將始終與每一個<input/>的變化更新，除非它會變成無效值，在這種情況下，將保持最後有效值它。

來源

2016-02-28 15:28:46 Przemek

jquery函數來總結具有2個類的文本框

回答

相關問題