从数组中获取值并检查（勾选）相关复选框答案

【问题标题】：Getting values from an array and checking (ticking) related checkboxes从数组中获取值并检查（勾选）相关复选框
【发布时间】：2017-01-13 05:22:14
【问题描述】：

我需要你的帮助。

如何从数组中获取值并使用 HTML 5 的数据属性检查（勾选）它们的相关复选框？

即。

var x = "[monday,thursday]"

<input name="recurr_weekday" type="checkbox" data-weekday="sunday">
<input name="recurr_weekday" type="checkbox" data-weekday="monday">
<input name="recurr_weekday" type="checkbox" data-weekday="tuesday">
<input name="recurr_weekday" type="checkbox" data-weekday="wednesday">
<input name="recurr_weekday" type="checkbox" data-weekday="thursday">
<input name="recurr_weekday" type="checkbox" data-weekday="friday">
<input name="recurr_weekday" type="checkbox" data-weekday="saturday">

...经过一些处理后，以下复选框将在其中打勾：

<input name="recurr_weekday" type="checkbox" data-weekday="monday">
<input name="recurr_weekday" type="checkbox" data-weekday="thursday">

【问题讨论】：

标签： javascript html forms checkbox

【解决方案1】：

这是另一个具有一些优势的解决方案：

即使在同一天有多个复选框，它也可以工作，例如，两个带有data-weekday="monday" 的复选框。
它会取消选中您所选日期数组中不的所有 recurr_weekday 复选框。
它只查询文档一次，效率更高 - 特别是在文档很大的情况下。

document.querySelector('button').onclick = checkTheDays;

var myDays = ["monday", "thursday"];

function checkTheDays() {
  var checkboxes = document.querySelectorAll('[name="recurr_weekday"]');

  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = myDays.indexOf(checkboxes[i].getAttribute('data-weekday')) > -1;
  }
}

Week 1:
<input name="recurr_weekday" type="checkbox" data-weekday="sunday">
<input name="recurr_weekday" type="checkbox" data-weekday="monday">
<input name="recurr_weekday" type="checkbox" data-weekday="tuesday">
<input name="recurr_weekday" type="checkbox" data-weekday="wednesday">
<input name="recurr_weekday" type="checkbox" data-weekday="thursday">
<input name="recurr_weekday" type="checkbox" data-weekday="friday">
<input name="recurr_weekday" type="checkbox" data-weekday="saturday">(Initially all unchecked)
<br />Week 2:
<input name="recurr_weekday" type="checkbox" data-weekday="sunday" checked>
<input name="recurr_weekday" type="checkbox" data-weekday="monday" checked>
<input name="recurr_weekday" type="checkbox" data-weekday="tuesday" checked>
<input name="recurr_weekday" type="checkbox" data-weekday="wednesday" checked>
<input name="recurr_weekday" type="checkbox" data-weekday="thursday" checked>
<input name="recurr_weekday" type="checkbox" data-weekday="friday" checked>
<input name="recurr_weekday" type="checkbox" data-weekday="saturday" checked>(Initially all checked)
<br />
<button>
  Check Mondays and Thursdays
</button>

【讨论】：

超级骗子谢谢你！

【解决方案2】：

你可以使用属性选择器

var x = ["monday", "thursday"];

for (let prop of x) {
  document.querySelector("input[type=checkbox][data-weekday=" + prop + "]")
  .checked = true;
}

【讨论】：

【解决方案3】：

您可以使用下面的代码：

x.forEach(function (weekDay){
    var htmlElement = document.querySelectorAll('[data-weekday="'+weekDay+'"]').checked = true;
});

它将遍历数组 x，每个值我们将找到具有 data-weekday value 属性的对应元素。

【讨论】：