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

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

## 動作の様子
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3017065/c5d69fc5-03f2-e955-46d0-b6a6312b45ec.gif">

## 実際にチェックボックスを触ってみよう！
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwBPWyv" data-preview="true" data-user="may9" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/may9/pen/VwBPWyv">
  チェックボックスをトグルボタンにする</a> by may9 (<a href="https://codepen.io/may9">@may9</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

- [ ] ⇒トグルの見た目「×」
- [x] ⇒トグルの見た目「✔︎」

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

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

## HTML、CSS、jQueryを使います

### HTML
```html:index.html
<div class="input checkbox">
    <label>
        <input type="checkbox" name="xxx" value="yes">
    </label>
</div>
```

### CSS
```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;
}
```

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

### jQuery
```html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
```
```js: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つになります。


https://qiita.com/may9create/items/28aeef20dd59bcdaa6b5