【以下を解決します】
・WEBサイトやWEBシステムにおしゃれなスイッチを設置したい
・jQueryで簡単でかっこいいチェックボックスを作りたい
・チェックボックスの見た目をおしゃれにしたい
システム開発やWEBサイトを開発、制作していると、フォームの中でチェックボックスを使う時があります。特にチェックリストにチェックをつける場面や、確認事項を確認したかをチェックする場面でチェックボックスのフォームをよく使うかと思います。
ただのチェックボックスだとちょっと物足りないなと思っている方は今回紹介する「Bootstrap Switch Button」のライブラリを使うことで簡単におしゃれなチェックボックスを作れるので、ぜひ試してみてください。
空のhtmlファイル（demo.html等）を作成し、当ページのサンプルソースを貼り付けて、ブラウザで実行すると、すぐに動作確認できます！
CDNを使うとライブラリのダウンロードも不要で以下のコピペだけで実装終了です！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>デモ</title>
<!-- jQuery・bootstrapライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- /jQuery・bootstrapライブラリ読み込み -->
<!-- 公式からダウンロードしてね -->
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<!-- /公式からダウンロードしてね -->
</head>
<body>
<div style="padding:20px;">
<div style="padding:20px;">
初期設定<br/>
<input type="checkbox" data-toggle="toggle" >
</div>
<div style="padding:20px;">
いろんなデザイン<br/>
<input type="checkbox" data-toggle="toggle" data-onstyle="outline-primary" data-offstyle="outline-secondary">
<input type="checkbox" data-toggle="toggle" data-onstyle="outline-secondary" data-offstyle="outline-success">
<input type="checkbox" data-toggle="toggle" data-onstyle="outline-success" data-offstyle="outline-danger">
<input type="checkbox" data-toggle="toggle" data-onstyle="outline-danger" data-offstyle="outline-warning">
<input type="checkbox" data-toggle="toggle" data-onstyle="outline-warning" data-offstyle="outline-info">
<input type="checkbox" data-toggle="toggle" data-onstyle="outline-light" data-offstyle="outline-dark">
<input type="checkbox" data-toggle="toggle" data-onstyle="outline-dark" data-offstyle="outline-primary">
</div>
<div style="padding:20px;">
いろんなデザイン<br/>
<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="secondary">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="danger">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="warning">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="info">
<input type="checkbox" checked data-toggle="toggle" data-onstyle="dark">
</div>
<div style="padding:20px;">
文字カスタマイズ<br/>
<input type="checkbox" checked data-toggle="toggle" data-off="Goodbye" data-on="Hello" />
</div>
<div style="padding:20px;">
文字とデザインカスタマイズ<br/>
<input type="checkbox" value="true" data-width="120"
data-toggle="toggle" data-on="削除する" data-off="削除しない" data-onstyle="danger" data-offstyle="success" >
</div>
</div>
</body>
</html>公式サイトはこちらになります。
https://gitbrent.github.io/bootstrap4-toggle
導入はCDNの方式も用意されているので、以下のコードをかけばOKです。
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
jQueryとbootstrap4も必須となりますが、CDNでの導入であれば、以下を記述すれば、問題ないです！
<!-- jQueryライブラリ読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- /jQueryライブラリ読み込み -->
<!-- bootstrapライブラリ読み込み -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- /bootstrapライブラリ読み込み -->
あとはサンプルソースのbody部分を貼り付けたら、完了となります。
HTMLを作成
デザインと文字をカスタマイズした部品を紹介します。
<input type="checkbox" value="true" data-width="120" data-height="40"
data-toggle="toggle" data-on="削除する" data-off="削除しない" data-onstyle="danger" data-offstyle="success" >
上記のHTMLのみでチェックボックスがおしゃれなスイッチになります。
jQueryでの指定やcssでの追記も不要です！とても簡単です。
スイッチのデザインにするには「data-toggle=”toggle”」と指定するだけです！
ライブラリは以下のようなオプションがあります。
◆data-width=”120″ → 幅
◆data-height=”40″ → 高さ
◆data-on=”削除する” →ONの時の名称（HTML指定可能）
◆data-off=”削除しない” →OFFの時の名称（HTML指定可能）
◆data-onstyle=”danger” → ONの時のデザイン（※種類は後述）
◆data-offstyle=”success” → OFFの時のデザイン（※種類は後述）
※デザインの種類は以下があります。各種類の色はサンプルを確認してください。
・primary
・secondary
・success
・danger
・warning
・info
・dark
disabledの制御ももちろん可能ですし、JavaScriptやjQueryで、チェックをつけた時のイベントリスナーや、チェック状態を確認する方法などは公式サイトに記載されています。
よかったら、ＳＮＳでシェアして頂けると嬉しいです！
今後の励みにもなりますので、よろしくお願いします！
