在用户响应后计算元素数量

时间:2014-03-08 20:55:32

标签: javascript jquery counting

In my example,每个包含id的div都包含用户响应控件(无线电组)。 我正在尝试计算DIV的数量,其中用户提供了响应并将结果提供给文本字段[name =“REP”]。可以接受是或否,以便计算回复。

HTML结构如下:

<div class="figures">
    <div id="Template_Questions">
        <label for="number1">Number of ALL items:</label>
        <input class="counter" type="number" name="ALL" id="number1">
    </div>
    <div id="Responded_Questions">
        <label for="number2">Number of RESPONDED items:</label>
        <input class="counter" type="number" name="RESP" id="number2">
    </div>
</div>

<div class="sections"><p>Sections</p>

    <div class="A" id="Q01">
        <h2>Section 1</h2>
        <h5>4201</h5>
            <div class="Response">
                <label><input type="radio" name="Radio1" value="Y" id="R1Y">Yes</label>
                <label><input type="radio" name="Radio1" value="N" id="R1N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs1">Notes:</label><br>
                <textarea name="observation" id="Obs1"></textarea>
            </div>
    </div>

    <div class="B" id="Q02">
        <h2>Section 2</h2>
        <h5>4202</h5>
            <div class="Response">
            <label><input type="radio" name="Radio2" value="Y" id="R2Y">Yes</label>
            <label><input type="radio" name="Radio2" value="N" id="R2N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs2">Notes:</label><br>
                <textarea name="observation" id="Obs2"></textarea>
            </div>
    </div>

    <div class="A" id="Q03">
        <h2>Section 3</h2>
        <h5>4203</h5>
            <div class="Response">
                <label><input type="radio" name="Radio3" value="Y" id="R3Y">Yes</label>
                <label><input type="radio" name="Radio3" value="N" id="R3N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs3">Notes:</label><br>
                <textarea name="observation" id="Obs3"></textarea>
            </div>
    </div>

    <div class="B" id="Q04">
        <h2>Section 4</h2>
        <h5>4204</h5>
            <div class="Response">
                <label><input type="radio" name="Radio4" value="Y" id="R4Y">Yes</label>
                <label><input type="radio" name="Radio4" value="N" id="R4N">No</label>
            </div>
            <div class="Observation">
                <label for="Obs4">Notes:</label><br>
                <textarea name="observation" id="Obs4"></textarea>
            </div>

    </div>
</div>

我已经计算了包含响应控件的DIV总数:

    jQuery(function ($) {

    $(function () {
    var counter = $("[id^=Q]").filter(function ()
    {
        return this.id.match(/Q\d+/);
    }).length;

    $("input[name=ALL]").val(counter);
})});

我想我也可以获得多个已检查的控件,但实际上需要DIV的数量。另一方面,如果任何无线电btns(是或否)= 1,那么这样的事情 应该做的伎俩,然后将数字传递给文本字段?

$("#Div input:checkbox:checked").length

提前致谢。

1 个答案:

答案 0 :(得分:1)

因为在每个div中只能检查一个输入,所以你可以简单地使用这样的

$('input[type="radio"]:checked').length

更新:使用输入更改事件

在文本字段中自动更新计数器
$('input[type="radio"]').change(function(){
     $('#textfield-id').val( $('input[type="radio"]:checked').length );
});