チェックボックスをトグルボタンにする[cssとjQuery]

こんなトグルボタンを作ります

動作の様子

実際にチェックボックスを触ってみよう！

See the Pen チェックボックスをトグルボタンにする by may9 (@may9) on CodePen.

このような意味合いのチェックボックスです。

• ⇒トグルの見た目「×」
• ⇒トグルの見た目「✔︎」

これは、例えばカートだと
商品を販売するor販売しないという選択肢で

• ⇒販売しない
• ⇒販売する

という選択肢欄があったときにトグルボタンだと分かりやすいですよね。

HTML、CSS、jQueryを使います

HTML

index.html

<div class="input checkbox">
    <label>
        <input type="checkbox" name="xxx" value="yes">
    </label>
</div>

CSS

style.css

@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");

/*common*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*main parts css*/
.input.checkbox {
    position: relative;
    width: 52px;
    height: 29px;
    border-radius: 50px;
    overflow: hidden;
    cursor: pointer;
}
.input.checkbox input[type=checkbox] {
    display: none;
}
.input.checkbox:before, .input.checkbox:after {
  font-size:14px;
}
.input.checkbox:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #ccc;
    transition: 0.2s ease-out;
}
.input.checkbox:after {
    content: "\f00d";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 23px;
    height: 23px;
    display: block;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3);
    transition: 0.2s ease-out;
    text-align: center;
    padding: 5px 0 0;
    line-height: 1;
    font-weight: bold;
    color: #ccc;
    letter-spacing: .5px;
    box-sizing: border-box;
}
.input.checkbox.checked:before {
    background: #112D4E;
}
.input.checkbox.checked:after {
    content: "\f00c";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    left: 26px;
    box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5);
    color: #112D4E;
    padding: 5px 0 0 1px;
}

「×」と「✔︎」マークはFont Awesomeを使って表示しています。

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

general.js

$(function() {
    //チェックボックスをクリックしたら発火
    $(".input.checkbox").on("click", function() {
    //inputがchecked属性「なし」の場合、checked属性「あり」にして、
    //「.input.checkbox」に「checked」クラスをaddする
        if(!$(this).children("label").children("input").prop("checked")) {
            $(this).children("label").children("input").prop("checked", true);
            $(this).addClass("checked");
    //inputがchecked属性「あり」の場合、checked属性「なし」にして、
    //「.input.checkbox」に「checked」クラスをremoveする
        } else {
            $(this).children("label").children("input").prop("checked", false);
            $(this).removeClass("checked");
        }
    });
});

まとめ

今回はjQueryでcheckedステータスに応じてクラスをつけたり外したりしています。
このパーツは、データベースに保存されている値を引っ張ってきてオン・オフ切り替えしたりするのでjQueryの力を借りていますが、書き方によってはCSSの力だけでスマートに書けるのかな？

※突然データベースの話出てきた？と思ったかもしれないですが、このパーツは下記の記事「cakePHP4でカートを作ってみる」の制作工程の1つになります。