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”。

借用mohkhan的代码：

<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

然后在复选框上添加click事件。像这样......

<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 个答案: