JavaScriptでHTML要素にクラスを追加、削除、切替え

JavaScriptで要素へクラスを追加、削除、切り替えするためのサンプルです。
jQueryは使わずに実装する(Vanilla JS)のが近年の潮流です。

要素にクラスを追加する

let element = document.querySelector('input[type=checkbox]');
element.classList.add("className");

要素からクラスを削除する

let element = document.querySelector('input[type=checkbox]');
element.classList.remove("className");

要素のクラス追加・削除を切り替える

let element = document.querySelector('input[type=checkbox]');
element.classList.toggle("className");