Javascript：通过遍历数组来检查复选框是否被选中答案

【问题标题】：Javascript: check if checkboxes are checked by looping through an arrayJavascript：通过遍历数组来检查复选框是否被选中
【发布时间】：2018-10-14 20:08:27
【问题描述】：

我有 3 组复选框 - checkboxDofM、checkboxMonth 和 checkboxDay。我想检查是否选中了checkboxDofM 的任何框。如果是，则用户不应选中checkboxDay 的任何框。同样，如果选中checkboxDay 中的任何框，则用户应该无法选择checkboxDofM 中的任何框。唯一的问题是我不知道该怎么做，因为我无法控制正在生成的复选框的 ID 和名称，而且 "checked" 函数似乎不起作用。有人可以帮我解决这个问题吗？

开发人员工具显示我得到的数组元素内的内容

这里是视图：

@using (Html.BeginForm("ScheduleInfo", "Scheduler", FormMethod.Post))
{
    Html.EnableClientValidation();

<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 checkboxDofM" id= "checkboxDofM">
                            @Html.HiddenFor(m => m.DofMInfo[i].DofMID)
                            @Html.CheckBoxFor(m => m.DofMInfo[i].IsChecked)
                            @Html.LabelFor(m => m.DofMInfo[i].IsChecked, Model.DofMInfo[i].DofMNo)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>

    <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 month(s) the task should be set at</h4>
                </li>
                @Html.HiddenFor(m => m.monthID)
                @Html.DisplayFor(m => m.monthName)
                @for (int i = 0; i < Model.MonthInfo.Count; i++)
                {
                    <li class="list-group-item" style="display:inline-block">
                        <div class="checkbox-inline checkboxMonth" id="checkboxMonth">
                            @Html.HiddenFor(m => m.MonthInfo[i].monthID)
                            @Html.CheckBoxFor(m => m.MonthInfo[i].IsChecked)
                            @Html.LabelFor(m => m.MonthInfo[i].IsChecked, Model.MonthInfo[i].monthName)
                        </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 checkboxDay" id="checkboxDay">
                            @Html.HiddenFor(m => m.DayInfo[i].dayID)
                            @Html.CheckBoxFor(m => m.DayInfo[i].IsChecked)
                            @Html.LabelFor(m => m.DayInfo[i].IsChecked, Model.DayInfo[i].dayName)
                        </div>
                    </li>
                }
            </ul>
        </div>
    </center>


    <script type="text/javascript">
        var myFunction = function () {
            var DofMCheck = Array.from(document.getElementsByClassName("checkbox-inline checkboxDofM"));

            console.log(DofMCheck);
        }();



    </script>

    <input type="submit" value="Submit Data" id="btnSubmit" />

}

这是视图模型：

        public class Values
    {

        public List<object> DayOfMonth { get; set; }
        public List<object> Month { get; set; }
        public List<object> DaysOfWeek { get; set; }



        [Required(ErrorMessage = "Field must not be left blank!")]
        [RegularExpression(@"^(,{0,1}(\b\d\b|[0-5][0-9]|\*+)(-\b\d\b|-[0-5][0-9]){0,1})$", ErrorMessage = "Enter a number between 0-59!")]
        public object Second { get; set; }


        [Required(ErrorMessage = "Enter a number between 0-59!")]
        [RegularExpression(@"^(,{0,1}(\b\d\b|[0-5][0-9]|\*+)(-\b\d\b|-[0-5][0-9]){0,1})$", ErrorMessage = "Enter a number between 0-59!")]
        public object Minute { get; set; }


        [Required(ErrorMessage = "Enter a number between 0-23!")]
        [RegularExpression(@"^(,{0,1}(\b\d\b|[0-1][0-9]|[2][0-3]|\*+)(-\b\d\b|-[0-1][0-9]|-[2][0-4]){0,1})$", ErrorMessage = "Enter a number between 0-23!")]
        public object Hour { get; set; }


        public List<SelectListItem> Jobs { get; set; }
        public int Job { get; set; }

        public List<Values> DofMInfo { get; set; }
        public string DofMNo { get; set; }
        public int DofMID { get; set; }

        public List<Values> MonthInfo { get; set; }
        public int monthID { get; set; }
        public string monthName { get; set; }


        public List<Values> DayInfo { get; set; }
        public int dayID { get; set; }
        public string dayName { get; set; }


        public bool IsChecked { get; set; }
    }

}

这里是控制器：

 public class SchedulerController : Controller
{
    // GET: Scheduler
    [HttpGet]
    public ActionResult SchedulerIndex()
    {

        List<Values> lst = new List<Values>();
        List<Values> lst2 = new List<Values>();
        List<Values> lst3 = new List<Values>();


        Values val = new Values();
        val.Jobs = new List<SelectListItem>();
        val.Jobs.Add(new SelectListItem() { Text = "Email", Value = "1", Selected = false });
        val.Jobs.Add(new SelectListItem() { Text = "Backup", Value = "2", Selected = false });
        val.Jobs.Add(new SelectListItem() { Text = "Start Application", Value = "3", Selected = false });
        val.Jobs.Add(new SelectListItem() { Text = "Job4", Value = "4", Selected = false });
        val.Jobs.Add(new SelectListItem() { Text = "Job5", Value = "5", Selected = false });

        List<Values> month11 = new List<Values>();
        month11.Add(new Values { monthID = 0, monthName = "Jan", IsChecked = false });
        month11.Add(new Values { monthID = 1, monthName = "Feb", IsChecked = false });
        month11.Add(new Values { monthID = 2, monthName = "Mar", IsChecked = false });
        month11.Add(new Values { monthID = 3, monthName = "Apr", IsChecked = false });
        month11.Add(new Values { monthID = 4, monthName = "May", IsChecked = false });
        month11.Add(new Values { monthID = 5, monthName = "Jun", IsChecked = false });
        month11.Add(new Values { monthID = 6, monthName = "Jul", IsChecked = false });
        month11.Add(new Values { monthID = 7, monthName = "Aug", IsChecked = false });
        month11.Add(new Values { monthID = 8, monthName = "Sep", IsChecked = false });
        month11.Add(new Values { monthID = 9, monthName = "Oct", IsChecked = false });
        month11.Add(new Values { monthID = 10, monthName = "Nov", IsChecked = false });
        month11.Add(new Values { monthID = 11, monthName = "Dec", IsChecked = false });

        List<Values> day6 = new List<Values>();
        day6.Add(new Values { dayID = 0, dayName = "Mon", IsChecked = false });
        day6.Add(new Values { dayID = 1, dayName = "Tue", IsChecked = false });
        day6.Add(new Values { dayID = 2, dayName = "Wed", IsChecked = false });
        day6.Add(new Values { dayID = 3, dayName = "Thu", IsChecked = false });
        day6.Add(new Values { dayID = 4, dayName = "Fri", IsChecked = false });
        day6.Add(new Values { dayID = 5, dayName = "Sat", IsChecked = false });
        day6.Add(new Values { dayID = 6, dayName = "Sun", IsChecked = false });

        List<Values> days31 = new List<Values>();
        days31.Add(new Values { DofMID = 0, DofMNo = "1", IsChecked = false });
        days31.Add(new Values { DofMID = 1, DofMNo = "2", IsChecked = false });
        days31.Add(new Values { DofMID = 2, DofMNo = "3", IsChecked = false });
        days31.Add(new Values { DofMID = 3, DofMNo = "4", IsChecked = false });
        days31.Add(new Values { DofMID = 4, DofMNo = "5", IsChecked = false });
        days31.Add(new Values { DofMID = 5, DofMNo = "6", IsChecked = false });
        days31.Add(new Values { DofMID = 6, DofMNo = "7", IsChecked = false });
        days31.Add(new Values { DofMID = 7, DofMNo = "8", IsChecked = false });
        days31.Add(new Values { DofMID = 8, DofMNo = "9", IsChecked = false });
        days31.Add(new Values { DofMID = 9, DofMNo = "10", IsChecked = false });
        days31.Add(new Values { DofMID = 10, DofMNo = "11", IsChecked = false });
        days31.Add(new Values { DofMID = 11, DofMNo = "12", IsChecked = false });
        days31.Add(new Values { DofMID = 12, DofMNo = "13", IsChecked = false });
        days31.Add(new Values { DofMID = 13, DofMNo = "14", IsChecked = false });
        days31.Add(new Values { DofMID = 14, DofMNo = "15", IsChecked = false });
        days31.Add(new Values { DofMID = 15, DofMNo = "16", IsChecked = false });
        days31.Add(new Values { DofMID = 16, DofMNo = "17", IsChecked = false });
        days31.Add(new Values { DofMID = 17, DofMNo = "18", IsChecked = false });
        days31.Add(new Values { DofMID = 18, DofMNo = "19", IsChecked = false });
        days31.Add(new Values { DofMID = 19, DofMNo = "20", IsChecked = false });
        days31.Add(new Values { DofMID = 20, DofMNo = "21", IsChecked = false });
        days31.Add(new Values { DofMID = 21, DofMNo = "22", IsChecked = false });
        days31.Add(new Values { DofMID = 22, DofMNo = "23", IsChecked = false });
        days31.Add(new Values { DofMID = 23, DofMNo = "24", IsChecked = false });
        days31.Add(new Values { DofMID = 24, DofMNo = "25", IsChecked = false });
        days31.Add(new Values { DofMID = 25, DofMNo = "26", IsChecked = false });
        days31.Add(new Values { DofMID = 26, DofMNo = "27", IsChecked = false });
        days31.Add(new Values { DofMID = 27, DofMNo = "28", IsChecked = false });
        days31.Add(new Values { DofMID = 28, DofMNo = "29", IsChecked = false });
        days31.Add(new Values { DofMID = 29, DofMNo = "30", IsChecked = false });
        days31.Add(new Values { DofMID = 30, DofMNo = "31", IsChecked = false });


        val.MonthInfo = month11;
        val.DayInfo = day6;
        val.DofMInfo = days31;

        ViewBag.lst = lst;
        ViewBag.lst2 = lst2;
        ViewBag.lst3 = lst3;

        return View(val);
    }

    [HttpPost]
    public ActionResult ScheduleInfo(Values model, int Job, string Second, string Minute, string Hour, object DayOfMonth, object Month, object DaysOfWeek)// int DayOfMonth)
    {
        var secondCon = Convert.ToInt32(Second);
        var minuteCon = Convert.ToInt32(Minute);
        var hourCon = Convert.ToInt32(Hour);

        model.Job = Job;
        model.Second = secondCon;
        model.Minute = minuteCon;
        model.Hour = hourCon;
        model.DayOfMonth = new List<object>();
        model.Month= new List<object>();
        model.DaysOfWeek = new List<object>();

        foreach (var dofm in model.DofMInfo)
        {
            if (dofm.IsChecked)
            {
                model.DayOfMonth.Add(dofm.DofMID);
            }
            else if (dofm.IsChecked == false)
            {
                model.DayOfMonth.Add("?");
            }
        }

        foreach (var month in model.MonthInfo)
        {
            if (month.IsChecked)
            {
                model.Month.Add(month.monthID);
            }

            else if(month.IsChecked)
            {
                model.Month.Add("*");
            }
        }

        foreach (var day in model.DayInfo)
        {
            if (day.IsChecked)
            {
                model.DaysOfWeek.Add(day.dayID);
            }

           else if (day.IsChecked== false)
            {
                model.DaysOfWeek.Add("?");
            }
        }

        return RedirectToAction("SchedulerIndex");
    }
}

我所说的检查不工作的意思是：

    <script>
let checkboxDofMElements = document.getQuerySelectorAll('.checkboxDofM');

for(let i = 0; i < checkboxDofMElements.length; i++)
{
 checkboxDofMElements[i].addEventListener('change', function(event)
 {
   if(this.checked)
   {
     console.log("Something has changed");
   }
   else
   {
     console.log("nothing has changed");
   }
 });
}
</script>

当我添加上面的脚本时，它应该返回“一些东西已经改变”。相反，它返回“没有任何改变”消息。

喜欢这个

【问题讨论】：

为了澄清 this 所引用的内容，请使用 console.log( this )。我建议使用 event.target 而不是 this，就像 Yosvel Quintero 在下面的回答中提到的那样。

标签： javascript c# html razor model-view-controller

【解决方案1】：

你最常使用Element.querySelectorAll()而不是document.getQuerySelectorAll('.checkboxDofM')

你可以使用event.target.checked而不是this.checked

代码示例：

const checkboxDofMElements = document.querySelectorAll('.checkboxDofM');

checkboxDofMElements.forEach(el => el.addEventListener('change', event => {
  const str = event.target.checked ? 'Something has changed' : 'nothing has changed';
  console.log(`${str} for day ${event.target.value}`);
}));

<input type="checkbox" name="day" value="1" class="checkboxDofM"> 1<br>
<input type="checkbox" name="day" value="2" class="checkboxDofM"> 2<br>

【讨论】：

但是你没有在你的例子中使用Element.querySelectorAll()。事实上你不能。最重要的是使用过的选择器本身。
是的，我愿意。请注意，我创建了变量checkboxDofMElements = document.querySelectorAll('.checkboxDofM')，在这种情况下，“元素”是document ;)
Narf ...我现在明白我的错误了。这不是关于Element 而不是document。这是关于querySelectorAll() 而不是getQuerySelectorAll()。我首先阅读了它。