オンオフ（トグル）ボタン

デモ

コピーする

input要素を１つ用意し、data-jscopyand="onOffButton"を付与してください。

サンプルHTMLを表示する

JSコードの解説を見てみる

オンオフボタンとなる要素を取得して変数に格納します。

オンオフ機能は HTML の<input type="range" />で実現します。
typeをrangeにし、最小値を０に、最大値を１に設定します。
０ならオフ、１ならオンと扱います。

値が変更されたときのイベントを設定します。
値は文字列になっているため、数値に変換して条件分岐に使用します。
JavaScript では０はfalse、０以外の数値はtrueになります。
本デモではオンオフの結果をアラートで表示しています。

機能に関するご質問は、このページの下部に表示されている Twitter のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM 等でご連絡ください。