javascript - 无需 jQuery 即可切换复选框选中属性

Question

这个问题已经有答案了:

How set item checkbox when i click on element span which have this checkbox? (3 个回答)

已关闭 5 年前。

我见过类似的问题，例如“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)