Javascript循环和if语句嵌套

Question

我已经搜索了论坛，但似乎找不到这个迷你问题的解决方案。

因此，我有一个这样的表格，我喜欢10组单选按钮，每组当然具有相同的名称。 我需要做的是遍历十个组中的每个组，如果所有这些组均未选中，则执行一个功能，但是我似乎找不到解决方案。 到目前为止，我已经完成了10遍代码，我知道这不是一个好主意。 我敢肯定，还有更好的方法可以做到这一点。

到目前为止，我有：

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

这是针对两个单选按钮组的，我有十个。 我怎么做才能不重复很多次？ 当前代码的问题是，如果选中了除第一个元素以外的任何单选按钮，则代码将执行“ false”操作，该操作仅应在组中所有元素上的“ .checked”为false时执行。

编辑

现在，此更新使代码仅在未检查所有字段的情况下才执行操作，但是我仍然重复代码太多次：

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

这是两组的HTML：

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

我希望我有道理。

谢谢

Answer 1

这样的事情应该起作用。 基本上，您要对通用结构进行通用检查，只要您的组结构正确（容器>输入），然后创建一个函数即可，将其传递给一个组，然后该函数将在该组中查找并查看所有被检查。 如果未全部选中，则下面的函数将返回true / false。

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

基本上，只需创建一个函数，以便您可以向其传递一个容器，然后使该函数循环通过所有输入。 如果找到未选中的框，则返回false。 否则返回true。

您可以对此进行增强，以传入一个容器数组，或者只是构建一个容器数组，然后遍历该数组，每次迭代都获得一个选项组

Answer 2

如何创建一个以形式和输入字段名称为参数的函数？

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