Javascript Loop & if statement nested

Question

I have searched the forums but I can't seem to find the solution for this mini-issue that I have.

So I have this form on which I have like 10 Groups of Radio buttons each group having the same name of course. What I need to do is loop through each of the ten groups and perform a function if all of them are unchecked but I can't seem to find a solution for this. With what I have accomplished so far I am repeating code 10 times which I know is not a good idea. I'm sure there is a better way to do that too.

What I have so far is:

var drivingCheck = document.getElementById('index-form').Driving;
for (var i = 0; i < drivingCheck.length; i++) {
    if (drivingCheck[i].checked == true) {
        break;
    } else {
        totalCount -= 5;
        console.log(totalCount);
        break;
    }
}
var sleepCheck = document.getElementById('index-form').Sleep;
for (var i = 0; i < sleepCheck.length; i++) {
    if (sleepCheck[i].checked == true) {
        break;
    } else {
        totalCount -= 5;
        console.log(totalCount);
        break;
    }
}

This is for two of the radio button groups, I have ten of these. How can I do this without repeating myself so many times? & the issue with the current code is, if any radio button except the first element is checked the code performs the " false " operation which should only be performed if the " .checked " is false on all elements of the group.

EDIT

This update now makes the code perform the operation only when all fields are not checked but still I am repeating the code too many times:

    var recreationCheck = document.getElementById('index-form').Recreation;
    for (var i = 0; i < recreationCheck.length; i++) {
        if (recreationCheck[i].checked == true) {
            break;
        } else if (recreationCheck[0].checked && recreationCheck[2].checked && recreationCheck[3].checked && recreationCheck[4].checked && recreationCheck[5].checked == false) {
            totalCount -= 5;
            console.log(totalCount);
            break;
        }
    }

Here is the HTML for the two groups:

    <h3>9: Sleep Per Night</h3>
    <div class="options">
    <input name="Sleep" type="radio" value="0" class="radioCheckBtn">I can sleep with no problem
    <input name="Sleep" type="radio" value="1" class="radioCheckBtn">My sleeping is a slight problem (only 1 hour lost sleep)
    <input name="Sleep" type="radio" value="2" class="radioCheckBtn">My sleeping is a mildly problem (1 to 2 hours lost sleep
    <input name="Sleep" type="radio" value="3" class="radioCheckBtn">My sleeping is a moderate problem (2 to 3 hours lost sleep)
    <input name="Sleep" type="radio" value="4" class="radioCheckBtn">My sleeping is a great problem (3 to 5 hours lost sleep)
    <input name="Sleep" type="radio" value="5" class="radioCheckBtn">My sleeping is a severe problem (5 to 7 hours lost sleep)
    </div>
    <h3>10: Recreational Activities</h3>
    <div class="options">
    <input name="Recreation" type="radio" value="0" class="radioCheckBtn">I can perform all recreation activity without neck pain
    <input name="Recreation" type="radio" value="1" class="radioCheckBtn">I can perform recreation activity with only some neck pain
    <input name="Recreation" type="radio" value="2" class="radioCheckBtn">I can perform most, not all recreation activity due to neck pain
    <input name="Recreation" type="radio" value="3" class="radioCheckBtn">I can only perform some recreation activity due to neck pain
    <input name="Recreation" type="radio" value="4" class="radioCheckBtn">I can hardly perform recreational activity due to pain in my neck
    <input name="Recreation" type="radio" value="5" class="radioCheckBtn">I cannot perform any recreation activity
    </div>

I hope I'm making sense.

Thank you

Answer 1

Something like this should work. Basically, you are doing a common check against a common structure so as long as your groups are structured correctly (container > inputs) then just create a function that you pass it a group and then that function will look inside that group and see if all are checked. The function below will return true/false if they are all checked or not.

JSFiddle: https://jsfiddle.net/u1b3qryf/15/

function checkRadioButtons(optionsDiv) {
    var inputs = $(optionsDiv).find('.radioCheckBtn');
    for (var j = 0; j < inputs.length; j++) {
        if ($(inputs[j]).is(':checked')) {
            return true;
        }
    }
    return false;
}

function runChecks() {
    var options = $('.options');
    var groupStatus = [];
    for (var i = 0; i < options.length; i++) {
        var allChecked = checkRadioButtons(options[i]);
        groupStatus.push({ group: 'group' + i, hasFieldChecked: allChecked });
    }
    return groupStatus;
}

Basically, just create a function so that you can pass it a container and then have that function loop through all your inputs. If it find box that isn't checked, return false. Otherwise return true.

You could enhance this to pass in an array of containers or just build an array of your containers and then loop through that array with each iteration getting one option group

Answer 2

How about creating a function which takes in the form and input-field name as a parameter?

var checkFunction = function(form, field){
   //fields can be Sleep, Recreation etc
   var fields = form[field];
   //Now, loop over the nodes in the list
   // and do whatever you want
}
var form = document.getElementById('index-form');
checkFunction(form, 'Sleep')