使用jQuery计算部分中单选按钮的总和

时间:2014-01-26 00:15:01

标签: javascript jquery checkbox

我有各个部分的单选按钮,我希望在每个部分中总计“是”选项的数量,以及所有部分的总计。

这是我的HTML:

<div class="toggle_container">
    <div class="block">

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 1</label>
                <div class="form_input">
                <input type="radio" class="form_radio calc" id="input1_yes" name="q1" value="Yes" />
                <label for="input1_yes">Yes</label>

                <input type="radio" class="form_radio" id="input1_no" name="q1" value="No" />
                <label for="input1_no">No</label>
                </div>
        </div>

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 2</label>
            <div class="form_input">
                <input type="radio" class="form_radio calc" id="input2_yes" name="q2" value="Yes" />
                <label for="input2_yes">Yes</label>

                <input type="radio" class="form_radio" id="input2_no" name="q2" value="No" />
                <label for="input2_no">No</label>
                </div>
        </div>

        <div class="form_line">
            <div class="form_input">
                <input type="text" name="sum_1" class="scorebox" readonly>
                </div>
        </div>

        </div>
</div>

<div class="toggle_container">
    <div class="block">

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 3</label>
                <div class="form_input">
                <input type="radio" class="form_radio calc" id="input3_yes" name="q3" value="Yes" />
                <label for="input3_yes">Yes</label>

                <input type="radio" class="form_radio" id="input3_no" name="q3" value="No" />
                <label for="input3_no">No</label>
                </div>
        </div>

        <div class="form_line form_line_border">
        <label class="form_label_left">Question 4</label>
            <div class="form_input">
                <input type="radio" class="form_radio calc" id="input4_yes" name="q4" value="Yes" />
                <label for="input4_yes">Yes</label>

                <input type="radio" class="form_radio" id="input4_no" name="q4" value="No" />
                <label for="input4_no">No</label>
                </div>
        </div>

        <div class="form_line">
            <div class="form_input">
                <input type="text" name="sum_2" class="scorebox" readonly>
                </div>
        </div>

        </div>
</div>

<div id="grand_total">
    <div class="block">

        <div class="form_line form_line_border">
        <label class="form_label_left">Grand Total</label>
                <div class="form_input">
                <input type="text" class="scorebox" id="grand_total" name="grand_total" />
                </div>
        </div>
    </div>
</div>

以下是剧本:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
function calcscore(){
    var score = 0;
    $(".calc:checked").each(function(){
            score+=1;
    });
    $("input[name=sum]").val(score)
}
$().ready(function(){
    $(".calc").change(function(){
        calcscore()
    });
});

});//]]>  
</script>

如何获得按部分加总的总数?目前,所有名称为“sum”的输入值都会增加。

3 个答案:

答案 0 :(得分:1)

喜欢这个吗?

$("input[type=radio][value=Yes]:checked").each(function(){
        score+=1;
});

答案 1 :(得分:1)

var score = $("input[type=radio][value=Yes]:checked").length;

答案 2 :(得分:0)

试试这个:

var $blocks = $('.toggle_container').children('.block');
$blocks.find('input:radio').change(function () {
    var total = 0;
    $blocks.each(function() {
        var $block = $(this),
            score = $block.find('.calc:checked').length;
        $block.find('.scorebox').val(score);
        total += score;
    });
   $('#grand_total').find('.scorebox').val(total);
}).first().change();

jsfiddle