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

这是两个单选按钮组，我有十个。如何在不重复这么多次的情况下做到这一点？＆安培;当前代码的问题是，如果检查除第一个元素之外的任何单选按钮，则代码执行＆＃34;假＆＃34;操作只应在＆＃34; .checked＆＃34;对于该组的所有元素都是错误的。

修改

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

    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

这样的事情应该有效。基本上，您正在对一个公共结构进行常见检查，因此只要您的组结构正确（容器＆gt;输入）然后只需创建一个函数，您将其传递给一个组，然后该函数将查看该组内部并查看是否所有都被检查。如果全部选中，则下面的函数将返回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')

Javascript Loop＆amp; if语句嵌套

2 个答案: