Question

这是我的测试代码，用于计算多项选择测验。

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Multiple checkbox calculation</title>
        <style>
            div {
                color: red;
                font-size: 35px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {


                $("input[type=checkbox]").click(function() {

                    var total = 0;
                    $("input[type=checkbox]:checked").each(

                    function() {

                        total += parseInt($(this).val());

                    });

                    $("#total").html("tatal:" + total);
                });

            });
        </script>
    </head>

    <body>
        <table>
            <thead>
                <tr>
                    <th scope="col" width="50px">No:</th>
                    <th scope="col" width="40px">A</th>
                    <th scope="col" width="40px">B</th>
                    <th scope="col" width="40px">C</th>
                    <th scope="col" width="40px">D</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared00" name="fieldMark[correct00]" value="1">
                        <label for="squared00" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared01" name="fieldMark[correct01]" value="-1">
                        <label for="squared01" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared02" name="fieldMark[correct02]" value="-1">
                        <label for="squared02" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared03" name="fieldMark[correct03]" value="-1">
                        <label for="squared03" class="css-label"></label>
                    </td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared10" name="fieldMark[correct10]" value="1">
                        <label for="squared10" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared11" name="fieldMark[correct11]" value="-1">
                        <label for="squared11" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared12" name="fieldMark[correct12]" value="-1">
                        <label for="squared12" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared13" name="fieldMark[correct13]" value="-1">
                        <label for="squared13" class="css-label"></label>
                    </td>
                </tr>
                <tr>
                    <th>3</th>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared20" name="fieldMark[correct20]" value="1">
                        <label for="squared20" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared21" name="fieldMark[correct21]" value="-1">
                        <label for="squared21" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared22" name="fieldMark[correct22]" value="-1">
                        <label for="squared22" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared23" name="fieldMark[correct23]" value="-1">
                        <label for="squared23" class="css-label"></label>
                    </td>
                </tr>
                <tr>
                    <th>4</th>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared30" name="fieldMark[correct30]" value="1">
                        <label for="squared30" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared31" name="fieldMark[correct31]" value="-1">
                        <label for="squared31" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared32" name="fieldMark[correct32]" value="-1">
                        <label for="squared32" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared33" name="fieldMark[correct33]" value="-1">
                        <label for="squared33" class="css-label"></label>
                    </td>
                </tr>
                <tr>
                    <th>5</th>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared40" name="fieldMark[correct40]" value="1">
                        <label for="squared40" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared41" name="fieldMark[correct41]" value="-1">
                        <label for="squared41" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared42" name="fieldMark[correct42]" value="-1">
                        <label for="squared42" class="css-label"></label>
                    </td>
                    <td>
                        <input type="checkbox" class="css-checkbox" id="squared43" name="fieldMark[correct43]" value="-1">
                        <label for="squared43" class="css-label"></label>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="total"></div>
    </body>

</html>

此代码用于自动计算多项选择测验。只有选项“A”对于每个5个问题都是正确的，否则所有选项都是不正确的。这是我的要求。

当用户仅针对任何问题编号点击“正确”选项时，它会将第1点添加到总数中。
当用户仅针对任何问题点击选项“不正确”时，会将点-1添加到总数中。
当用户点击任何问题编号的“正确”和“错误”选项时，它会将积分-1加到总数中。例如，用户单击问题1的所有复选框，它应该仅添加-1到总数（例如，在上面的例子中它是-2，即= 1-1-1-1。）即。如果用户选中了上面例子中的所有复选框，它将获得总数：-10。但我的要求是只显示-5。即= -1-1-1-1-1。

提前感谢..

Answer 1

我在http://jsfiddle.net/DYduY/为你创造了一个小提琴。这不是最好的解决方案，但我所做的是计算每行的总数。如果它低于-1，例如-2比我将行值更改为-1。这样，行的最大负值为-1。

$(document).ready(function() {


    $("input[type=checkbox]").click(function() {

        var total = 0;

        $("tr").each(function() {

            var rowTotal = 0;


            $(this).find("input[type=checkbox]:checked").each(

                function() {

                    rowTotal += parseInt($(this).val());

                });

            if (rowTotal < -1) { rowTotal = -1 }


            total += rowTotal;
        });




        $("#total").html("tatal:" + total);
    });

});

Answer 2

得到更多改进解决方案。这是jquery代码。

$(document).ready(function() {

         $("input[type=checkbox]").click(function() {

            var total = 0;

            $("tr").each(function() {

                var checked = $(this).find( "input:checked").length;

                var values =  $(this).find( "input[type=checkbox]").map(function() {
                                return parseInt($(this).val());
                                }).get();

                var minimum = Math.min.apply( this, values );


                var rowTotal = 0;


                $(this).find("input[type=checkbox]:checked").each(

                    function() {

                        rowTotal += parseInt($(this).val());

                    });

                if (checked > 1) { rowTotal = minimum }


                total += rowTotal;
            });


            $("#total").html("tatal:" + total);
        });

    });

多个复选框jquery计算

2 个答案: