僅在選中復選框的情況下，如何將＃。##值添加到已經具有另一個##。##值的文本框中？

Question

我一直試圖弄清楚如何制作它，以便如果選中了特定的復選框，則在單擊提交按鈕之前，在提交表單之前，文本框中的總金額將添加到50.00。 實際上，最好在選中復選框后立即進行更新。

這是我到目前為止嘗試過的：

<!DOCTYPE html>
<html>
<head>
<script>
function toggle(){
var indoorCamping = 50.00;
var total = 0.00;
if(document.getElementByName('fifty').is(':checked')){
total = (indoorCamping + document.getElementsByName('Amount').value);
document.getElementsByName('Amount').value = total;
}

else{
return;
}
}
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

<input type="checkbox" name="fifty" value="indoor"/>

<label for="Amount">Amount <span class="req">*</span> <span 

id="constraint-300-label"></span></label><br />
                <input type="text" class="cat_textbox" id="Amount" name="Amount" />

<p id="demo"></p>

<button onclick="toggle()">Click me</button>

</body>
</html>

Answer 1

文本輸入的值最初始終是文本（字符串）。 在將該值添加到數字之前，需要將其顯式轉換為數字，否則它將文本連接在一起。 因此，“ 20”將變為“ 5020”。

借用莫汗的代碼：

<script>
function toggle(checkbox){
    var indoorCamping = 50.00;
    var total = 0.00;
    if(checkbox.checked){
        total = (indoorCamping + document.getElementById('Amount').value * 1);
        document.getElementById('Amount').value = total;
    }
}
</script>

我乘以1，這是將“ 20”轉換為數字的一種方法。 Number(x) ， parseInt(x)和parseFloat(x)是其他方式。

我更喜歡使用amt對象變量：

<script>
function toggle(checkbox) {
    var indoorCamping = 50.00;
    var total = 0.00;
    var amt = null;
    if (checkbox.checked) {
        amt = document.getElementById('Amount');
        total = (indoorCamping + amt.value * 1);
        amt.value = total;
    }
}
</script>

Answer 2

然后在復選框上添加單擊事件。 像這樣...

<input type="checkbox" name="fifty" value="indoor" onclick="toggle(this);"/>

然后在您的腳本中...

<script>
function toggle(checkbox){
var indoorCamping = 50.00;
var total = 0.00;
if(checkbox.checked){
    total = (indoorCamping + document.getElementById('Amount').value);
    document.getElementById('Amount').value = total;
}
}
</script>

僅在選中復選框的情況下，如何將＃。##值添加到已經具有另一個##。##值的文本框中？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-07-28 01:37:01

解決方案2
0 2013-07-28 00:42:45

僅在選中復選框的情況下，如何將＃。##值添加到已經具有另一個##。##值的文本框中？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-07-28 01:37:01

解決方案2 0 2013-07-28 00:42:45

解決方案1
1 已采納 2013-07-28 01:37:01

解決方案2
0 2013-07-28 00:42:45