Question

我试图总结已选中复选框的值。复选框的值是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>

我只得到第一个复选框。其他人都没有工作

Answer 1

您的代码中有一些问题

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

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

getElementByName返回DOM对象而不是它的值，您应该使用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;
}

Answer 2

document.getElementByName（）返回与提供的名称匹配的第一个元素，搜索将不再进行。首先，在不同的输入元素上使用相同的名称不是一个好习惯。但是，如果您仍然想获取具有特定名称的所有元素，则可以使用以下文档，document.querySelectorAll（“ input [name ='checkbox_no []']”）

Answer 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>

获取复选框的整数值并将其求和

3 个答案: