Question

如果选中了复选框列表，我需要检查onload。我知道它需要一个foreach循环，因为在onchange代码中也使用了它：

{{1}}

如何初始化它，以便检查是否已选中复选框？

我尝试使用＆＃39; window.onload＆＃39;选择，但这不是一条路，显然......

Answer 1

当复选框的值更改并且已选中时，

Onchange事件会触发。＆LT; =＆GT;未经检查＆＃39;。您可以使用dispatchEvent触发事件（以及您的侦听器），但随后您的复选框状态将改为相反。

可以检查复选框＆＃39;在页面加载，如果它有一个属性＆＃39;已检查＆＃39;。您只需检查checked是否为真：

＆＃13;

var boxes = document.querySelectorAll('input[type=checkbox]');

for (var box of boxes) {
  if (box.checked === true) { // checked?
    console.log(box)
  }
}

＆＃13;

<input type="checkbox" value="one">
<input type="checkbox" value="two" checked>
<input type="checkbox" value="three">

＆＃13;

Answer 2

将更改视图的代码移出事件处理程序，以便您可以在页面加载和事件处理程序中调用它。例如：

var checkboxes = Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]'));

function update(checkbox) {
  checkbox.parentNode.querySelector('p').innerHTML = checkbox.checked ? 'Not Visible' : 'Visible';
  var cardId = 'card-' + checkbox.id.split('-')[1];
  document.getElementById(cardId).classList.toggle('card-disabled', checkbox.checked);
}

checkboxes.forEach(function(elem) {
  update(elem);
  elem.addEventListener('change', function(evt) {
    update(evt.target);
  });
});

input{ float: left; }
[id^=card-] { display: inline-block; width: 2em; height: 2em; border: 1px solid green; }
.card-disabled { opacity: .2; }

<div id="switch-wrapper-">
  <div>
    <input type="checkbox" id="x-1">
    <p></p>
  </div>
  <div>
    <input type="checkbox" id="x-2" checked>
    <p></p>
  </div>
</div>
<div id="card-1">1</div>
<div id="card-2">2</div>

请注意forEach我是如何立即调用update，以及添加一个在更改时调用它的事件侦听器。

如何运行这个＆＃39; onchange＆＃39;代码加载？

2 个答案: