无法使用jQuery添加单选按钮值

时间:2015-05-06 02:56:48

标签: javascript jquery html5 jquery-mobile javascript-events

我正在尝试添加在“提交”按钮上选择的单选按钮的所有值。它有时会将0更改为200,但不能正确添加。我不太清楚这个是怎么回事,因为总量有时会改变,但不准确。

请参阅https://jsfiddle.net/amgodv58/

    <form name="form1" method="POST" onsubmit="calculateTotal()"> 


                <table>
                <thead>
        <tr class="headings">
            <td class="blank">&nbsp;</td>

                        <th class="heading" scope="col">A little of the time</th>
                        <th class="heading" scope="col">Some of the time</th>
                        <th class="heading" scope="col">Good part of the time</th>
                        <th class="heading" scope="col">Most of the time</th>

        </tr><!-- /.headings -->
    </thead>                <tbody>
                        <tr class="question">
            <td class="prompt"><span class="num">1. </span>I feel more nervous and anxious than usual.</td>

                        <td class="response"><input type="radio" class="amount" name="q1" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q1" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q1" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q1" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">2. </span>I feel afraid for no reason at all.</td>

                        <td class="response"><input type="radio" class="amount" name="q2" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q2" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q2" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q2" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">3. </span>I get upset easily or feel panicky.</td>

                        <td class="response"><input type="radio" class="amount" name="q3" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q3" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q3" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q3" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">4. </span>I feel like I&rsquo;m falling apart and going to pieces.</td>

                        <td class="response"><input type="radio" class="amount" name="q4" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q4" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q4" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q4" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">5. </span>I feel that everything is all right and nothing bad will happen.</td>

                        <td class="response"><input type="radio" class="amount" name="q5" value="4"  /></td>
            <td class="response"><input type="radio" class="amount" name="q5" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q5" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q5" value="1"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">6. </span>My arms and legs shake and tremble.</td>

                        <td class="response"><input type="radio" class="amount" name="q6" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q6" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q6" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q6" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">7. </span>I am bothered by headaches neck and back pain.</td>

                        <td class="response"><input type="radio" class="amount" name="q7" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q7" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q7" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q7" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">8. </span>I feel weak and get tired easily.</td>

                        <td class="response"><input type="radio" class="amount" name="q8" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q8" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q8" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q8" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">9. </span>I feel calm and can sit still easily.</td>

                        <td class="response"><input type="radio" class="amount" name="q9" value="4"  /></td>
            <td class="response"><input type="radio" class="amount" name="q9" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q9" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q9" value="1"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">10. </span>I can feel my heart beating fast.</td>

                        <td class="response"><input type="radio" class="amount" name="q10" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q10" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q10" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q10" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">11. </span>I am bothered by dizzy spells.</td>

                        <td class="response"><input type="radio" class="amount" name="q11" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q11" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q11" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q11" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">12. </span>I have fainting spells or feel like it.</td>

                        <td class="response"><input type="radio" class="amount" name="q12" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q12" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q12" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q12" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">13. </span>I can breathe in and out easily.</td>

                        <td class="response"><input type="radio" class="amount" name="q13" value="4"  /></td>
            <td class="response"><input type="radio" class="amount" name="q13" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q13" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q13" value="1"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">14. </span>I get numbness and tingling in my fingers and toes.</td>

                        <td class="response"><input type="radio" class="amount" name="q14" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q14" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q14" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q14" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">15. </span>I am bothered by stomach aches or indigestion.</td>

                        <td class="response"><input type="radio" class="amount" name="q15" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q15" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q15" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q15" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">16. </span>I have to empty my bladder often.</td>

                        <td class="response"><input type="radio" class="amount" name="q16" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q16" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q16" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q16" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">17. </span>My hands are usually dry and warm.</td>

                        <td class="response"><input type="radio" class="amount" name="q17" value="4"  /></td>
            <td class="response"><input type="radio" class="amount" name="q17" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q17" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q17" value="1"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">18. </span>My face gets hot and blushes.</td>

                        <td class="response"><input type="radio" class="amount" name="q18" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q18" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q18" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q18" value="4"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">19. </span>I fall asleep easily and get a good night&rsquo;s rest.</td>

                        <td class="response"><input type="radio" class="amount" name="q19" value="4"  /></td>
            <td class="response"><input type="radio" class="amount" name="q19" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q19" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q19" value="1"  /></td>


        </tr><!-- /.question -->
                <tr class="question">
            <td class="prompt"><span class="num">20. </span>I have nightmares.</td>

                        <td class="response"><input type="radio" class="amount" name="q20" value="1"  /></td>
            <td class="response"><input type="radio" class="amount" name="q20" value="2"  /></td>
            <td class="response"><input type="radio" class="amount" name="q20" value="3"  /></td>
            <td class="response"><input type="radio" class="amount" name="q20" value="4"  /></td>


        </tr><!-- /.question -->
            </tbody>                <tfoot>
        <tr>
            <td class="submit" colspan="5">
                <div class="submit">

                    <button class="submit-button" name="submit">Submit</button>
                    <div class="clear"></div>
                </div>

            </td>
                    <td><span class="total">0</span></td>

        </tr>
    </tfoot>
        </table>

</form>
<input class="total" name="total" type="text"/>

的JavaScript

$( ".submit-button" ).click(function() {          
                calculateTotal($(this).closest('table'));
    });

function calculateTotal($tab) {
    var sum = 0;
    $tab.find('input').each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $tab.find(".total").html(sum.toFixed(2));
}

1 个答案:

答案 0 :(得分:1)

这里有一些简化的代码。您应该检查单选按钮是否已checked关闭。

http://jsbin.com/ribupakiwa/2/edit?js,output

这里只展示JS。

$( ".submit-button" ).click(function() {
    event.preventDefault();
    calculateTotal($(this).closest('table'));
});

function calculateTotal($tab) {
    var sum = 0;
    $tab.find('input:checked').each(function() {
        sum += parseInt($(this).val()) || 0;
    });

    $(".total").html(sum.toFixed(2));
}

parseInt($(this).val()) || 0是一种拯救NaN的奇特方式。 NaN || 00,因为NaN是假值。