Question

我有一个网站来预测足球比赛的结果。每个足球比赛都有三个复选框。

一线队获胜（1个复选框）

2胜2队（1个复选框）

3等于（1复选框）

一页上有10场足球比赛。因此，在页面上，我有30个复选框。用户可以为每个足球比赛选择所有三个复选框。

我需要jQuery代码才能像此网站一样工作：

https://web.archive.org/web/20100529040418/http://www.bwin90.com/

如果您在足球比赛中选择两个或三个复选框，则数字呈指数增长。我的html和php代码：

<form method="POST">
    <div class="form-group mt-4">
        <div class="w-100 p-3">
            <table class="table">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center" scope="col"></th>
                        <th class="text-center" scope="col">team1</th>
                        <th class="text-center" scope="col">equal</th>
                        <th class="text-center" scope="col">team2</th>
                        <th class="text-center" scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    <form>
                        <?php
                                    $get_teams1="SELECT * FROM teams WHERE show_match=1 ORDER BY team_id DESC";         
                                    $get_teams2 = mysqli_query($conn, $get_teams1);
                                    while($get_teams3=mysqli_fetch_assoc($get_teams2))
                                    {
                                        echo'
                                                <tr>
                                                  <td class="text-right"><input type="checkbox" class="qty1 form-check-input" value="20" id="exampleCheck1"></td><td class="text-center">'.$get_teams3["mizban"].'</td>
                                                  <td class="text-center"><input type="checkbox" class="qty1 form-check-input" id="exampleCheck1"></td>
                                                  <td class="text-center">'.$get_teams3["mihman"].'</td><td class="text-right"><input type="checkbox" class="qty1 form-check-input" id="exampleCheck1"></td>
                                                </tr>
                                        ';
                                    }                               
                                ?>
                            <input type="text" class="total" value="" />
                    </form>
                </tbody>
            </table>
            <button type="button" class="btn btn-dark mt-2 w-100" name="register3" />
            <h5>ثبت فرم</h5>
            </button>
        </div>
    </div>
</form>

我的jquery代码：

<script>
    $(document).ready(function(){
        $(document).on("change", ".qty1", function() {
            var sum = 0;
            $(".qty1").each(function(){
                sum += +$('.qty1').val();
            });
            $(".total").val(sum);
        });                                 
    });                 
</script>

最后，我想通过选择复选框立即显示费用金额。

Answer 1

您可以尝试这样的事情

HTML代码

    <table class="table table-bordered" id="filltable">
                                   <tr>
                                       <td>demo <input  type="checkbox" id="chk1" value="10" onchange="add(1,10)"/></td>
                                       <td>demo1 <input type="checkbox" id="chk2" value="10" onchange="add(2,10)" /></td>
                                       <td>demo2 <input type="checkbox" id="chk3" value="10" onchange="add(3,10)"/></td>
                                       <td>demo3 <input type="checkbox" id="chk4" value="10" onchange="add(4,10)"/></td>
                                   </tr>
</table>

和Jquery代码：

var sum = 0;
        function add(id,value) {
            if ($('#chk' + id).prop('checked') == true) {
             sum=   sum + value
            }
            else {
              sum=  sum - value
            }
            alert(sum);
        }

使用jQuery收集复选框的值

1 个答案: