Question

我有2套复选框;我们称他们为a和b。我已经编写了一个脚本，如果选中了b中的任何一个复选框，则会禁用该复选框，反之亦然。

目前，我正在尝试编写一个脚本，该脚本将检查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变量。另外，=是分配，您需要使用==或===进行比较。或者，在布尔值的情况下，只需使用变量本身。

如果你确定两个方框都已被选中，那么你的逻辑会倒退 - checkedField应该是假的。

但您可以使用.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;
}

Answer 2

我设法弄清楚如何解决这个问题：

            function EmptyFields() {

            var checkedField = false;

            checkboxDayElement.forEach(function (a) {
                if (a.checked) {
                    checkedField = true;
                }
            });

            checkboxDofMElement.forEach(function (b) {
                if (b.checked) {
                    checkedField = true;
                }
            });

            if (!checkedField) {
                alert("You have to select either a day(s) of month or a day(s) of week");
            } else {
                alert("Task has been set");
            }


            return checkedField;

        }

这是重构我最初的代码并在底部添加if statament以使用boolean正确表达逻辑的问题。我感谢贡献者的帮助。

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

2 个答案: