Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

148
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda