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

javascripthtml


Solution 1:[1]

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>

Solution 2:[2]

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>

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 cam
Solution 3 Sebastian Simon

Related Questions