Jquery - Count number of empty elements within form

Question

I have a Bootstrap 3 form like this and I would like to use JQuery to count the number of elements that have no value or not selected (radio buttons, checkboxes and selects)

<div class="form-group required">
    <label class="control-label">Field 1</label>
    <div>
        <input type="text" name="field1" class="form-control">
    </div>
</div>
<div class="form-group required">
    <label class="control-label">Field 2</label>
    <div>
        <input type="text" name="field2" class="form-control">
    </div>
</div>
<div class="form-group required">
    <label class="control-label">Field 3</label>
    <div>
        <input type="radio" class="" name="field3" value="0"> No
        <input type="radio" class="" name="field3" value="1"> Yes
    </div>
</div>
<div class="form-group">
    <label class="control-label">Field 4</label>
    <div>
        <input type="checkbox" class="" name="field3" value="1"> Yes
    </div>
</div>
<div class="form-group required">
    <label class="control-label>Gield 5</label>
    <div>
        <select class="form-control">
            <option value=""></option>
            <option value="1">1</option>
            <option value="23">2</option>
        </select>
    </div>
</div>

I have this JQuery that at the minute will count all text inputs that have no value. This works but I've just realised that the radio buttons have a value and the same with the checkboxes.

$(document).ready(function() {

    function animateProgress() {

        count = $('#createPartForm .form-control').filter(function(){
                        return !$(this).val();
                }).length;

        /*var radios_length  = $('#createPartForm input[type=radio]').length;

        if(radios_length > 0 ) {
            //count = (count - radios_length) +1
        }

        console.log(count);*/

        var test = 20 - ((20 / fields) * count);

        $(bar).attr('aria-valuenow', aria + test);

        var bar_width = $(bar).attr('aria-valuenow');
        $(bar).width(bar_width + '%');
        $('.progress-completed').text(bar_width + '%');
    }

    var fields = $('.control-label').length;
    var bar = $('.progress-bar');
    var aria =  $(bar).data('arianow');

    animateProgress();

    $('.form-control').focusout(function() {
        animateProgress();
    }); 
});

This bit of code that counts all the empty values, doesn't count radio, checkboxes or the select. How can i tweak it so it counts all inputs but only count radio button groups as one element?

count = $('#createPartForm .form-control').filter(function(){
            return !$(this).val();
        }).length;

Answer 1

i'm not sure if I understand your request properly. but $( "input[type=radio]" ) will get all radio buttons. you can then filter by using .is(":selected") to find all selected radio buttons. the count of unchecked will be all - selected