在没有 jQuery 的情况下切换复选框选中的属性

Question

我看过类似的问题，例如“How do I toggle an element's class in pure JavaScript?”，但这个问题是指属性。

我有一个这样的复选框：

<span class="newsletter-checkbox">
  <input type="checkbox" name="newsletter" id="newsletter" checked> Sign up to the newsletter as well - recieve new posts in your inbox
</span>

如何才能在单击 .newsletter-checkbox 中的任何位置（包括文本）时切换复选框 checked 属性？

Answer 1

只需使用这个：

function toggleCheckbox() {
  var checkbox = document.getElementById('newsletter');
  checkbox.checked = !checkbox.checked;
}

<span class="newsletter-checkbox" onclick="toggleCheckbox()"><input type="checkbox" name="newsletter" id="newsletter" checked> Sign up to the newsletter as well - recieve new posts in your inbox</span>

（基于 Toggle a boolean in javascript）

在没有 jQuery 的情况下切换复选框选中的属性

Toggle checkbox checked attribute without jQuery

html

javascript

checkbox

toggle

togglebutton