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

はじめに

わたしが今回作ったものを見たほうが早いと思うのでこちらご覧ください。
https://microwave-cheat.netlify.app/

これは下にある食べ物のアイコンをクリックすると、上の電子レンジに加熱時間が表示されるサイトになっています。
この表示方法について、私はcheckboxとjQueryを組み合わせて頑張ったので、ここに書き残したいと思います。といっても結構ごり押したので、もっとシンプルなやり方がありましたらぜひ教えていただきたいです。

コードの書き方

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

HTMLの記述

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

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>

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

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はダサいので非表示にするというよくやる手法です。

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の記述

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

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だけど複数選択不可にするということです。

終わりに

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