使用复选框来决定哪些输入框值总和

我想写一些JavaScript/jQuery来总结在多个文本框中输入的值。使用复选框来决定哪些输入框值总和

每个输入框都有一个与其关联的复选框，并根据该复选框将该值添加到总数中。例如，如果用户选择Activity fees和Transport fees，则他们应该加起来，如果他选择Misc fees也将加起来，并且如果他然后取消选中Misc fees，则应该再次减去该值。

function optionalfee() { 
 
    var total = 0; 
 
    var fee = document.getElementsById('optional1'); 
 
    for (var i = 0; i < fee.length; ++i) { 
 
     if (optional1.checked == true) 
 
     document.getElementById('optional').value = fee; 
 
     total += parseFloat(fee.value); 
 
    } 
 
    } else { 
 
    total -= parseFloat(fee.value); 
 
    } 
 
    //alert(total); 
 
document.getElementById('toptional').value = total; 
 
}

Include Activity fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="afees"><br><br> 
 
Include Transport fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="tfees"><br><br> 
 
Include Misc fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="mfees"><br><br> 
 
Include Olympiad fees <input type="checkbox" id="optional1" /><input type="number" id="optional" name="ofees"><br><br> 
 
Optional fees total <input type="number" id="toptional" name="toptional" class="toptional" readonly>

来源

2016-09-30 Jigna Jain

你应该只有一个元素与'id =“optional1”' –

“似乎无法让它工作”并不是对问题的有意义的描述。它以什么方式失败？另外，如另一条评论（可能还会更多）所述，HTML无效。所以任何JavaScript的行为都将被定义，直到更正。 'id's需要是唯一的。 – David

格式化你的代码表明你有语法错误 - 缺少'if（optional1.checked == true）'之后的括号，例如 – mplungjan

取得所有ID唯一
使用的类，而不是
添加缺少的括号
测试isNaN和价值观空
时数变化

注意我使用的数据的ID属性

平原JS：

function optionalfee() { 
 
    var total = 0; 
 
    // get the checked boxes only 
 
    var checks = document.querySelectorAll('.optional:checked'); 
 
    for (var i = 0; i < checks.length; ++i) { 
 
    var check = checks[i]; 
 
    // find the ID of the input to use 
 
    var input = document.getElementById(check.getAttribute("data-id")); 
 
    var val = input.value; 
 
    // handle poor or no input - is in principle already handled by the type="number" 
 
    val = (isNaN(val) || "" === val.trim()) ? 0 : parseFloat(val); 
 
    total += val; 
 
    } 
 
    document.getElementById('toptional').value = total; 
 
} 
 
window.onload = function() { 
 
    var checks = document.querySelectorAll(".optional"), 
 
    fees = document.querySelectorAll(".fee"); 
 
    for (var i = 0; i < checks.length; i++) { 
 
    checks[i].onclick = optionalfee; 
 
    fees[i].oninput = optionalfee; 
 
    } 
 
}

Include Activity fees 
 
<input type="checkbox" class="optional" data-id="optional1" /> 
 
<input type="number" class="fee" id="optional1" name="afees"> 
 
<br> 
 
<br>Include Transport fees 
 
<input type="checkbox" class="optional" data-id="optional2" /> 
 
<input type="number" class="fee" id="optional2" name="tfees"> 
 
<br> 
 
<br>Include Misc fees 
 
<input type="checkbox" class="optional" data-id="optional3" /> 
 
<input type="number" class="fee" id="optional3" name="mfees"> 
 
<br> 
 
<br>Include Olympiad fees 
 
<input type="checkbox" class="optional" data-id="optional4" /> 
 
<input type="number" class="fee" id="optional4" name="ofees"> 
 
<br> 
 
<br>Optional fees total 
 
<input type="number" id="toptional" name="toptional" class="toptional" readonly>

的jQuery：

function optionalfee() { 
 
    var total = 0; 
 
    $('.optional:checked').each(function() { 
 
    var val = $("#"+$(this).data("id")).val(); 
 
    val = isNaN(val) || "" === $.trim(val) ? 0 : parseFloat(val); 
 
    total += val; 
 
    }); 
 
    $('#toptional').val(total); 
 

 
} 
 

 
$(function() { 
 
    $(".optional").each(function() { 
 
    $(this).on("click", optionalfee); 
 
    // if not next to each other, 
 
    // use $("#"+$(this).data("id")).on("input", optionalfee); 
 
    $(this).next().on("input", optionalfee); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
Include Activity fees 
 
<input type="checkbox" class="optional" data-id="optional1" /> 
 
<input type="number" class="fee" id="optional1" name="afees"> 
 
<br> 
 
<br>Include Transport fees 
 
<input type="checkbox" class="optional" data-id="optional2" /> 
 
<input type="number" class="fee" id="optional2" name="tfees"> 
 
<br> 
 
<br>Include Misc fees 
 
<input type="checkbox" class="optional" data-id="optional3" /> 
 
<input type="number" class="fee" id="optional3" name="mfees"> 
 
<br> 
 
<br>Include Olympiad fees 
 
<input type="checkbox" class="optional" data-id="optional4" /> 
 
<input type="number" class="fee" id="optional4" name="ofees"> 
 
<br> 
 
<br>Optional fees total 
 
<input type="number" id="toptional" name="toptional" class="toptional" readonly>

来源

2016-09-30 12:32:06 mplungjan

1.有限的查找数量，因为它只是使用的复选框。 2. JQuery版本没有这样做，但看看下一个 - 但是假设复选框将保留在输入旁边。秋千和环岛......我的解决方案可以在两种情况下调整使用data-id。另外分号是可选的，除非你需要缩小 - ==也可以很好地工作。我会为你更新;） – mplungjan

<input type="checkbox" id="afees" class="sum-checkbox" /> 
<input type="number" id="optional" name="afees">

分配input#numbername作为造成相应的复选框的ID。为所需的复选框添加一个常见类(e.g. sum-checkbox)。

var sumAll = 0; 
$(".sum-checkbox").on('change',function(){ 

    var currentCheck = $(this); 
    var checkId = $(currentCheck).attr('id'); 
    if(currentCheck.prop('checked')){ 

     sumAll += parseInt(inputVal); 

    }else{ 
     sumAll -= parseInt(inputVal); 
    } 


})

来源

2016-09-30 12:16:52

首先，我注意到你正在设置ID =“optional1”很多元素，记得ID是标识符，它应该是在HTML文档中是唯一的。

来源

2016-09-30 12:17:47

检查代码

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
</head> 
<script type="text/javascript"> 

function optionalfee(){ 
    var total = 0; 
    for (var i = 1; i<=4; ++i){ 
     var fee = document.getElementById('optional'+i); 
     if(fee.checked==true){ 
      total += parseFloat(document.getElementById('optional-fee'+i).value); 
     } 
    } 
    //alert(total); 
    document.getElementById('toptional').value = total; 
} 
</script> 
</head> 
<body> 
Include Activity fees <input type="checkbox" id="optional1" onclick="optionalfee()" /> <input type="number" id="optional-fee1" name="afees"><br><br> 
Include Transport fees <input type="checkbox" id="optional2" onclick="optionalfee()" /> <input type="number" id="optional-fee2" name="tfees"><br><br> 
Include Misc fees <input type="checkbox" id="optional3" onclick="optionalfee()" /> <input type="number" id="optional-fee3" name="mfees"><br><br> 
Include Olympiad fees <input type="checkbox" id="optional4" onclick="optionalfee()" /> <input type="number" id="optional-fee4" name="ofees"><br><br> 
Optional fees total<input type="number" id="toptional" name="toptional" class="toptional" readonly> 
<input type="button" onclick="optionalfee()" value="sum" /> 
</body> 
</html>

来源

2016-09-30 12:18:16 Veer

这看起来不起作用，因为当我取消选中框时，该值不能正确计算。 –

来计算你需要点击按钮总和。 – Veer

或者如果你想在checbox的点击上计算每个复选框中的添加事件onclick =“optionalfee（）” – Veer

id应该在同一个文档中是唯一的，但您可以在不使用这些ID的情况下实现您想要的功能，请使用:checked检查下面的示例以获取选中的复选框，然后each()通过它们并计算总数。

希望这会有所帮助。

function calculate_sum() { 
 
    var total = 0; 
 
    $('input[type="checkbox"]:checked').each(function(){ 
 
    total += parseInt($(this).next('input').val()); 
 
    }) 
 

 
    $('#toptional').val(total); 
 
} 
 

 
$('input[type="checkbox"]').on('change', function(){ 
 
    calculate_sum(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Include Activity fees <input type="checkbox" id="optional11" /><input type="number" id="optional1" name="afees"><br><br> 
 
Include Transport fees <input type="checkbox" id="optional22" /><input type="number" id="optional2" name="tfees"><br><br> 
 
Include Misc fees <input type="checkbox" id="optional33" /><input type="number" id="optional3" name="mfees"><br><br> 
 
Include Olympiad fees <input type="checkbox" id="optional44" /><input type="number" id="optional4" name="ofees"><br><br><hr> 
 
Optional fees total <input type="number" id="toptional" name="toptional" class="toptional" readonly>

来源

2016-09-30 12:33:37

嗨Zakaria Achkari你能帮我理解JavaScript吗？ –

我不会在复选框上使用更改事件 – mplungjan

JavaScript来总结多个数字输入的值输入的每一个元素checkbox或input分别接收点击或输入时间：

var total = document.getElementById('toptional'), 
 
    checkboxs = document.getElementsByClassName('checkbox'), 
 
    inputs = document.getElementsByClassName('fee'), 
 
    getTotalFee = function() { 
 
     var totalFee = 0; 
 
     for (var i = 0, len = checkboxs.length; i < len; i++) { 
 
      checkboxs[i].checked && (totalFee += +inputs[i].value); 
 
     } 
 
     total.value = totalFee; 
 
    }; 
 

 
for (var i = 0, len = checkboxs.length; i < len; i++) { 
 
    checkboxs[i].addEventListener('click', getTotalFee, false); 
 
    inputs[i].addEventListener('input', getTotalFee, false); 
 
}

Include Activity fees: 
 
<input type="checkbox" class="checkbox"> 
 
<input type="number" name="afees" class="fee"><br> 
 

 
Include Transport fees: 
 
<input type="checkbox" class="checkbox"> 
 
<input type="number" name="tfees" class="fee"><br> 
 

 
Include Misc fees: 
 
<input type="checkbox" class="checkbox"> 
 
<input type="number" name="mfees" class="fee"><br> 
 

 
Include Olympiad fees: 
 
<input type="checkbox" class="checkbox"> 
 
<input type="number" name="ofees" class="fee"><br> 
 

 
<br><br><hr> 
 

 
<strong>Optional fees total:</strong> 
 
<input type="number" id="toptional" name="toptional" value="0" class="toptional" readonly>

来源

2016-09-30 12:43:55

为什么在所有现代浏览器都可用时创建新方法，即使浏览器不理解addEventListener？考虑到我在答案中解释的其他问题，我不明白为什么这是公认的答案。 – mplungjan

该方法只是按类名返回[Array]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array）元素，它的工作原理..现在更新使用'for'循环进行迭代.. –

顺便说一句，再次检查方法：'var arrFromList = ClassName => [] .slice.call（document.getElementsByClassName（ClassName））;'它运行良好并返回一个数组而不是NodeList实例或NodeList的超集（例如，FF返回HTMLCollection的实例）。 –

使用复选框来决定哪些输入框值总和

回答

相关问题