Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

158
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda