如何计算复选框的值？

Question

我有 table 其中包含以下数据结构：

ID	payroll_cat_name	payroll_cat_code	category_type	amount
1	Provident Fund	PF	dedution	1000
2	Basic Pay	BC	earning	35000
3	Travelling	TA	earning	6500
4	Home Allowance	HM	earning	12000
5	Tax	TX	dedution	500

我正在使用以下代码获取所有数据：

<?php
include "../db.php";
$select_payroll_category = "SELECT * from payroll_category";
$employee_payroll_result = mysqli_query($con,$select_payroll_category);
?>
<table>
    <thead style="color: #222426;">
        <tr>
            <th>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input checkAll">
                    <label class="form-check-label">ID</label>
                </div>
            </th>
            <th>Category name</th>
            <th>Category code</th>
            <th>Category Type</th>
            <th>Category Amount</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
        while ($row = mysqli_fetch_array($employee_payroll_result)) {
            echo "<tr style='color:#222426;'>
                    <td>
                    <div class='form-check'>
                    <input type='checkbox' name='payroll_group' value=".$row["amount"]."class='form-check-input'>
                    <label class='form-check-label' style='color:#fff;'>".$row["payroll_cat_id"]."</label>
                    </div>
                    </td>
                    <td>".$row["payroll_cat_name"]."</td>
                    <td>".$row["payroll_cat_code"]."</td>
                    <td>".$row["category_type"]."</td>
                    <td>".$row["amount"]."</td>
                    
                  </tr>";
                    }
                    ?>
                        
                    </tbody>
                </table>
                <button id="button">save</button>
                <p id="result"></p>

现在button点击我想根据category_type,

计算金额

如果类别是earning那么它会添加金额，

如果类别是dedution那么它会减去数量，

使用 jquery，我想执行这个

以下是我试过的 jquery 代码，

<script type="text/javascript">
    $(document).ready(function(){
        $("#button").click(function(){
            var favorite = [];
            $.each($("input[name='payroll_group']:checked"), function(){
                favorite.push($(this).val());
            });
            var total = 
            console.log("My favourite sports are: " + favorite);
            $('#result').html(favorite);
        }); 
    });
</script>

通过使用此代码，我得到 1000,35000,6500 我在复选框

中勾选的金额的值

Answer 1

试试这个

<body>
    <table>
        <tbody>
            <tr>
                <td><div><input type="checkbox"></div></td>
                <td>...</td>
                <td>...</td>
                <td>deducing</td>
                <td>1000</td>
            </tr>
            <tr>
                <td><div><input type="checkbox"></div></td>
                <td>...</td>
                <td>...</td>
                <td>earning</td>
                <td>6000</td>
            </tr>
            <tr>
                <td><div><input type="checkbox"></div></td>
                <td>...</td>
                <td>...</td>
                <td>earning</td>
                <td>3000</td>
            </tr>
            <tr>
                <td><div><input type="checkbox"></div></td>
                <td>...</td>
                <td>...</td>
                <td>earning</td>
                <td>1200</td>
            </tr>
            <tr>
                <td><div><input type="checkbox"></div></td>
                <td>...</td>
                <td>...</td>
                <td>deducing</td>
                <td>1000</td>
            </tr>
        </tbody>
    </table>
    <button type="button" id="button">Yo</button>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(function() {
            $("#button").click(function() {
                let total = 0;
                $("tbody:first tr").each(function() {
                    if ($(this).children("td").first().children("div").children("input").is(":checked")) {
                        if ("deducing" == $(this).children("td").eq(3).text()) total = total - parseInt($(this).children("td").eq(4).text());
                        else if ("earning" == $(this).children("td").eq(3).text()) total = total + parseInt($(this).children("td").eq(4).text());
                    }
                });
                alert(total);
            });
        });
    </script>
</body>

Answer 2

如果是正确的，这里的问题是你有正确的金额，但是丢失了是否添加或减去总数的“元信息”，那么我认为最简单的解决方案将执行以下操作：

首先更改复选框的值，使其反映要采取的操作 - 即，如果它是 deduction，则将值设置为负数。所以你的 input 将是：

<input type='checkbox' name='payroll_group' value=" . ($row['category_type'] === 'deduction' ? $row["amount"] * -1 : $row["amount"]) . "class='form-check-input'>

其中 ($row['category_type'] === 'deduction' ? $row["amount"] * -1 : $row["amount"]) 将检查 category_type 是否为 deduction 然后将 amount 乘以 -1 否则保持当前 amount 值。请注意周围的括号是必要的。

那么在你当前的 js 中，你应该以 [-1000,35000,6500] 在你当前的例子中结束。然后你可以做一个简单的循环来遍历数组并添加到总数中，或者你可以使用类似 reduce()

var totalAmount = favorite.reduce(
    function (total, amount) {
        return parseInt(total) + parseInt(amount)
    },
    0 // The initial value to start with
)

如何计算复选框的值？

How to calculate the value of checked box?

php

checkbox

jquery