-1

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

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

4

3 回答 3

1

There are some issues in your code

  1. getElementByName returns the first element that has the given name attribute, it doesn't even check if the checkbox has been checked or not.

You should use document.querySelectorAll("[name='checkbox_no[]']:checked"); which returns all DOM elements that has the given name and that have been checked.

  1. getElementByName returns the DOM object not its value, you should retrieve the value from value property of the DOM object, using 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;
}
于 2019-07-12T09:37:32.860 回答
0

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

于 2019-07-12T09:35:27.183 回答
-1

请检查对您有帮助。

        <!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>
于 2019-07-12T10:06:49.867 回答