Counting number of elements after user's response

Question

In my example, each div with id contains controls for user's response (radio group). I am trying to count number of DIVs, in which user has provided response and feed the result into a text field [name="REP"]. Either Yes or No is acceptable for response to be counted.

HTML structure follows:

<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>

I have counted the total number of DIVs, containing response controls:

    jQuery(function ($) {

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

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

I think I can also get number of checked controls, but actually need number of DIVs. On the other hand, if ANY of the radio btns (either Yes or No) = 1, then something like this should do the trick and then just pass the number to the textfield?

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

Thanks in advance.

Answer 1

since only one input could be checked in each div you can simply use something like this

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

UPDATE: auto update counter in text field using input change event

$('input[type="radio"]').change(function(){
     $('#textfield-id').val( $('input[type="radio"]:checked').length );
});