获取复选框的整数值并将其总结[关闭]答案

【问题标题】：Getting the integer values of checkboxes and sum it up [closed]获取复选框的整数值并将其总结[关闭]
【发布时间】：2019-07-12 09:27:37
【问题描述】：

我尝试总结选中复选框的值。复选框的值是 BALANCE。当我选中复选框时，结果应显示在金额字段上。提前致谢！

echo "<th>Amount: </th>";
            echo "<td colspan=2><input type='text' disabled name='amount' id='amount' onchange='addBalance()'></td>";
            echo "<td><input type='submit' name='print' value='PRINT'></td>";
            echo "</tr>";

foreach ($data as $value) {
echo '<td><input type="text" readonly name="balance$i" value='.$value["BALANCE"].'></td>';
echo "<td><input type='checkbox' name='checkbox_no[]' id='checkbox_no' value=".$value["BALANCE"]." onkeypress='return isNumber(this)' onchange='addBalance()'></td>";
}
<script>

    function addBalance(){
    var number=document.getElementByName("checkbox_no[]");  
    var sample =10;
    document.getElementById('amount').value = parseFloat(number);
    }



</script>

我只得到第一个复选框。其他的不工作

【问题讨论】：

请清楚您的要求。提供所有有助于我们最终重现您的问题的详细信息。
我想我明白你在问什么。所以你只得到一个值，因为另一个输入的 name=balances$1，并且你正在检查 getElementByName("checkbox_no[]");，如果该名称不等于 checkbox_no[]，那么 getElementbyname 不知道看那里。但是@vivek_23 所说的，修改你的问题，更清楚。

标签： javascript php html.checkbox dom-selection

【解决方案1】：

您的代码中存在一些问题

getElementByName 返回具有给定名称属性的第一个元素，它甚至不检查复选框是否已选中。

您应该使用document.querySelectorAll("[name='checkbox_no[]']:checked");，它返回所有具有给定名称且已被检查的 DOM 元素。

getElementByName 返回 DOM 对象而不是它的值，你应该从 DOM 对象的 value 属性中检索值，使用 DOMObject.value

function addBalance(){
    var checkboxes = document.querySelectorAll("[name='checkbox_no[]']:checked");
    var number = Array.prototype.reduce.call(checkboxes, function (a ,c) {
        return a + parseFloat(c.value);
    }, 0);
    document.getElementById('amount').value = number;
}

【讨论】：

复选框的值来自数据库。我想在不提交的情况下获取值。只需单击复选框即可。
echo "" 字段 i想要显示复选框总和的值
echo "";
函数 addBalance(){ var number=document.getElementById("checkbox_no$i").value; document.getElementById('amount').value = parseFloat(number); }
$i in php 将被评估并替换为数字，但 javascript 不这样做。无论如何，我认为您想要所有选中复选框的值的总和，如果这是您想要的，我给出的解决方案将起作用

【解决方案2】：

document.getElementByName() 返回与提供的名称匹配的第一个元素，搜索不会进一步。首先，在不同的输入元素上使用相同的名称不是一个好习惯。但是如果你仍然想获取具有特定名称的所有元素，你可以使用下面的 document.querySelectorAll("input[name='checkbox_no[]']")

【讨论】：

【解决方案3】：

请检查是否对您有帮助。

        <!DOCTYPE html>
        <html>
        <head>
            <title>Your Title</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        </head>
        <body>
            <div class="container">
                <form action="yourpage.php" method="post">
                    <div class="form-group">
                        <label for="default">
                            HTML ( $30.00 )
                        </label>
                        <input type="checkbox" value="30.00" id="html_service" class="checkbox" name="services[]" > 
                    </div>
                    <div class="form-group">
                        <label for="default">
                            CSS ( $50.50 )
                        </label>
                        <input type="checkbox" value="50.50" id="css_service" class="checkbox" name="services[]" >  
                    </div>
                    <div class="form-group">
                        <label for="default">
                            PHP ( $100.25 )
                        </label>
                        <input type="checkbox" value="100.25" id="php_service" class="checkbox" name="services[]" > 
                    </div>
                    <div class="form-group">
                        <label for="default">
                            Complete Package ( $150.50 )
                        </label>
                        <input type="checkbox" value="150.50" id="complete_service" class="checkbox" name="services[]" >    
                    </div>
                    <input id="input" type="text" value="0" readonly>
                    <input type="button" name="save_payment" class="btn btn-info" value="Save">
                </form>
            </div>
        </body>
        </html>
        <script type="text/javascript">
            $(document).ready(function(){
                $("input[type='checkbox']").on("change", function(){
                    checked_id  = $(this).attr("id");
                    cost        = $(this).val();
                    input_val   = $("#input").val();
                    if ($(this).prop("checked") == true) {
                        $("#input").val(parseFloat(input_val) + parseFloat(cost));
                    }else{
                        $("#input").val(parseFloat(input_val) - parseFloat(cost));
                    }
                })
            })
        </script>

【讨论】：