Toggle checkbox checked attribute without jQuery

Question

I have seen similar questions such as "How do I toggle an element's class in pure JavaScript?", but this question refers to attributes instead.

I have a checkbox like so:

<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>

How do I make it so that when anywhere in .newsletter-checkbox (including the text) is clicked, it toggles the checkbox checked attribute?

Could i suggest something very simple, just use label tag: https://jsfiddle.net/wggofhhf/ ? — sinisake, Nov 12 '17 at 07:12
@sinisake Wow cool, I never realized you could do that! Make it an answer and I'll accept now... — Ethan, Nov 12 '17 at 07:21

score 5 · Accepted Answer · answered Nov 12 '17 at 06:59

Simply use this:

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>

(based off Toggle a boolean in javascript)

Toggle checkbox checked attribute without jQuery

1 Answers1