Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

155
Views
How to toggle a `<textarea>`’s `spellcheck` attribute with a checkbox?

I’d like to have a checkbox that, when checked, will enable a <textarea>’s spellcheck attribute and vice-versa.

However, I’m not sure if this is possible.

This is my code so far:

document.getElementById('sampleCheckbox').addEventListener('click', function() {
  let textArea = document.getElementById('sampleTextarea');
  
  textArea.setAttribute('spellcheck', 'true') = !textArea.setAttribute('spellcheck', 'false')
});
Enable/Disable Spellcheck <input type="checkbox" id="sampleCheckbox" checked>
<br>
<br>
<textarea spellcheck="true" rows="5" cols="50" id="sampleTextarea">sadadadadadsasamkdajdakmkmxzcm</textarea>

How do I achieve this goal?

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

You can add an event listener to the change event on the checkbox element and then use setAttribute to set the spellcheck to the value of the checkbox.

document.querySelector('input').addEventListener('change', (e) => {
    document.querySelector('textarea').setAttribute('spellcheck', e.currentTarget.checked)
})
<textarea spellcheck="true">This is a spellling mistake.</textarea>
<label><input type="checkbox" checked>Spellcheck?</label>

about 4 years ago · Juan Pablo Isaza Report

0

Your syntax wouldn’t work because you can’t assign to the result of a function.

The spellcheck attribute has the somewhat weird requirement that its values should match exactly "true" or "false". This means it’s an enumerated attribute, but not a boolean attribute. But the values are boolean literals, as strings.

If you encounter any attribute that behaves this way, this is how you can toggle it:

textArea.setAttribute("spellcheck", !JSON.parse(textArea.getAttribute("spellcheck")));

JSON.parse accepts (among other things) a boolean literal as a string, i.e. "true" or "false", and turns it into an actual boolean. The string value is retrieved with getAttribute. The logical NOT (!) inverts the parsed boolean. Then, setAttribute sets the result (no need to convert the boolean back into a string: attribute values can only be strings, so setAttribute performs this conversion for you).

If you had a true boolean attribute such as contenteditable, then this is much easier done with toggleAttribute.

Your event listener relies on the click event. But toggling a checkbox can be achieved many other ways (e.g. keyboard navigation, touch, etc.). Use the change event instead.

document.getElementById("sampleCheckbox").addEventListener("change", () => {
  const textArea = document.getElementById("sampleTextarea");
  
  textArea.setAttribute("spellcheck", !JSON.parse(textArea.getAttribute("spellcheck")));
});
<label>Enable / Disable Spellcheck: <input id="sampleCheckbox" type="checkbox" checked></label>

<textarea id="sampleTextarea" spellcheck="true" rows="5" cols="50">sadadadadadsasamkdajdakmkmxzcm</textarea>

about 4 years ago · Juan Pablo Isaza Report

0

  • To handle checkbox events use change instead of click.
  • Use an argument inside function(e) to access the event. You can use any argument instead of e.
  • Use e.target.checked which will return true if checked and false if not.
  • Then perform any action

let checkBox = document.getElementById('sampleCheckbox');
     checkBox.addEventListener('change', function(e) {
      let textArea = document.getElementById('sampleTextarea');
      if (e.target.checked) {
        textArea.setAttribute('spellcheck', 'true')
      }else{
        textArea.setAttribute('spellcheck', 'false')
      }
});
Enable/Disable Spellcheck <input type="checkbox" id="sampleCheckbox" checked> <br><br>

<textarea spellcheck="true" rows="5" cols="50" id="sampleTextarea">sadadadadadsasamkdajdakmkmxzcm</textarea>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!