Javascript - 检查两组复选框是否未选中

Question

我有两组复选框；我们称它们为 a 和 b。我写了一个脚本，如果 b 中的任何复选框被选中，它会禁用 a 的复选框，反之亦然。

目前，我正在尝试编写一个脚本来检查 a 和 b 是否都未被选中。如果未选中它们，则发出警告告诉用户并取消提交功能，因为我已将该功能作为 onclick 分配给提交按钮。我该怎么做？

我在下面添加了 html 和 Javascript:

HTML:

  <center>
    <div class="col-2">
        <ul class="list-group">
            <li class="list-group-item-heading list-group-item active">
                <h4 class="list-group-item-text">Select the day(s) of the month the task should be set at</h4>
            </li>
            @Html.HiddenFor(m => m.DofMID)
            @Html.DisplayFor(m => m.DofMNo)
            @for (int i = 0; i < Model.DofMInfo.Count; i++)
            {
                <li class="list-group-item" style="display:inline-block">
                    <div class="checkbox-inline" id="checkboxDofM">
                        @Html.HiddenFor(m => m.DofMInfo[i].DofMID)
                        @Html.CheckBoxFor(m => m.DofMInfo[i].IsChecked, new { @class = "checkboxDofM" })
                        @Html.LabelFor(m => m.DofMInfo[i].IsChecked, Model.DofMInfo[i].DofMNo)
                    </div>
                </li>
            }
        </ul>
    </div>
</center>

<center>
    <div class="col-3">
        <ul class="list-group">
            <li class="list-group-item-heading list-group-item active">
                <h4 class="list-group-item-text">Select the day(s) the task should be set at</h4>
            </li>
            @Html.HiddenFor(m => m.dayID)
            @Html.DisplayFor(m => m.dayName)
            @for (int i = 0; i < Model.DayInfo.Count; i++)
            {
                <li class="list-group-item" style="display:inline-block">
                    <div class="checkbox-inline" id="checkboxDay">
                        @Html.HiddenFor(m => m.DayInfo[i].dayID)
                        @Html.CheckBoxFor(m => m.DayInfo[i].IsChecked, new { @class = "checkboxDay" })
                        @Html.LabelFor(m => m.DayInfo[i].IsChecked, Model.DayInfo[i].dayName)
                    </div>
                </li>
            }
        </ul>
    </div>
    </center>
<input type="submit" value="Submit Data" id="btnSubmit" onclick='return EmptyFields();' />

Javascript:

//blocks one set of checkboxes if the other is selected
    function DaysBlocker() {
        checkboxDayElement.forEach(function (item) {
            item.disabled = false;
        });

        checkboxDofMElement.forEach(function (item) {
            if (item.checked) {

                checkboxDayElement.forEach(function (item2) {
                    item2.disabled = true;
                });
            }
        });
    }
    function DofmBlocker() {
        checkboxDofMElement.forEach(function (a) {
            a.disabled = false;
        });

        checkboxDayElement.forEach(function (a) {
            if (a.checked) {
                checkboxDofMElement.forEach(function (b) {
                    b.disabled = true;
                });
            }
        });
    }

与问题相关的 Javascript 以及我到目前为止所做的事情:

 function EmptyFields() {

    var checkedField = true;

    checkboxDofMElement.forEach(function (a) {
        if (a.checked = false) {
            checkedField = false;

            checkboxDayElement.forEach(function (b) {
                if (b.checked = false) {
                    checkedField = false;
                }
            });

        }
    });

    alert("You have to select either a day(s) of the month or a day(s) of the week");

    return false;
}

Answer 1

您需要检查警报周围的 checkedField 变量。另外，=是赋值，需要用==或===进行比较。或者，对于 bool 值，只需使用变量本身。

并且您的逻辑是倒退的——checkedField 应该为 false，直到您确定两个框都被选中。

但是你可以使用.some()函数来检查每组是否至少有一个框被选中。

function EmptyFields() {

    var checkedField = checkboxDofMElement.some(a => a.checked) || checkboxDayElement.some(a => a.checked);

    if (!checkedField) {
        alert("You have to select either a day(s) of the month or a day(s) of the week");
    }
    return checkedField;
}