jQueryとcheckboxの組み合わせって使えるのだ。

#はじめに
わたしが今回作ったものを見たほうが早いと思うのでこちらご覧ください。
https://microwave-cheat.netlify.app/
<img width="400px" alt="サイト参考" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/937659/d536449b-b414-9c41-3a3f-43661f71e78b.png">
これは下にある**食べ物のアイコンをクリック**すると、上の電子レンジに**加熱時間が表示される**サイトになっています。
この表示方法について、私はcheckboxとjQueryを組み合わせて頑張ったので、ここに書き残したいと思います。といっても結構ごり押したので、もっとシンプルなやり方がありましたらぜひ教えていただきたいです。

#コードの書き方
実際にコードはこちらをご覧ください。
https://github.com/6kimaguregirl/microwave

##HTMLの記述
ひとつひとつの食べ物アイコンのボタンはこちらのコードで出来ています。
全体をlabelで囲っているので、画像をクリックすると、checkboxがtrueになったのと同じ作用があります。`onclick="clickFood1()"`はこの画像がクリックされたときに呼び出される関数です。下記のjQueryのコードと関連してきます。

```html:index.html
<label for="food1">
  <div class="food-btn">
    <input class="checkbox" type="checkbox" id="food1" onclick="clickFood1()">
    <img src="img/apple.png" alt="" class="foodimg">
  </div>
</label>
```

加熱時間の表示の部分はこちらになります。

```html:index.html
 <div class="mw1-content">
    <h2>加熱時間</h2>
    <p class="message">600W 5分</p>
    <p class="message">700W 20秒</p>
    <p class="message">500W 2分</p>
    <p class="message">600W 2分</p>
    <p class="message">700W 3分</p>
    <p class="message">600W 1.5～2分</p>
    <p class="message">500W 1.3分</p>
    <p class="message">600W 20～30秒</p>
    <p class="message">600W 1.5分</p>
    <p class="message">600W 1.5～2分</p>
</div>
```

##CSSの記述
アイコンをマウスオーバーしたときに全体が少し拡大すること、もともとはアイコンの周りを線で囲うことなど、デザインのアレンジについて記述しています。また、最後の``input[type="checkbox"``に関する記述はデフォルトのcheckboxはダサいので非表示にするというよくやる手法です。

```css:style.css
img {
    border: var(--border0);
    background-color: var(--color8);
    border-radius: 15px;
    width: 150px;
    margin: 20px;
}

.food-btn {
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}

.food-btn:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}

input[type="checkbox"] {
    display: none;
}
```

##jQueryの記述
ここは問題のだいぶごり押した箇所になります。

```javascript:script.js
        let foodBtn = $(".checkbox");
        let foodImg = $(".foodimg");
        let message = $(".message")

        function resetCheck() {
            for (let i = 0; i < foodBtn.length; i++) {
                $(foodBtn[i]).prop("checked", false);
            }
        }

        function resetImg() {
            for (let i = 0; i < foodImg.length; i++) {
                $(foodImg[i]).css("background-color", "rgba(255,255,255,0.85)")
            }
        }

        function resetMessage() {
            for (let i = 0; i < message.length; i++) {
                $(message[i]).css("display", "none");
            }
        }

        function clickFood1() {
            if (document.getElementById('food1').checked) {
                resetCheck();
                resetImg();
                $(foodBtn[0]).prop("checked", true);
                $(foodImg[0]).css("background-color", "#AAAFC6");
                resetMessage();
                $(message[0]).css("display", "block");

            } else {
                $(message[0]).css("display", "none");
            }
        }
```

###jQueryコード解説

最初の3行は同じクラス名のついて配列を変数に代入しています。
>例えばcheckboxというクラスがついたinputタグの1つ目は``foodBtn[0]``、2つ目は``foodBtn[1]``という名前が付くイメージです。

次の3つの関数は全体リセットのために作りました。
>``resetCheck()``はすべてのcheckboxのcheckを外します。（=falseにします）
``resetImg()``アイコンの表示をクリックされていないときの表示（background-colorが塗られていない状態）にします。
``resetMessage()``はすべての加熱時間の表示を消します。

それぞれのボタンをクリックしたときのコードが``clickFood1()関数``になります。これはhtmlに記述のあった``onclick="clickFood1()"``と連動しています。
>ここで書いてあることは、
もし、クリックしたときにcheckされている状態であったら、
まず、すべてのチェックを外して、画像も元通りにして、加熱時間もすべて非表示にしてから、クリックされたものだけチェックをつけて、画像もチェックされた仕様にして、加熱時間もそれだけ表示する。という少々面倒くさい手法を用いました。

簡単に言うと、ここでやったことは**checkboxだけど複数選択不可**にするということです。

##終わりに
正直、もっといい方法があるように思います（笑）なのでぜひ教えてくださいませ～