checkboxがoffになったら、実行解除をしたい

現在のコードはcheckboxにクリックを入れると、一回実行されてそのままの状態になっていますが、checkboxのon,offの判定をして、onなら実行されて、offなら実行が解除される事が理想です。

checkboxだけの書き方がいいのですが、調べても、formありきの書き方しか出てきません。

解決方法が分かる方、教えて頂きたいです。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6  <meta charset="UTF-8">
7</head>
8
9<body>
10  <p>サンプル
11   <div class="hako" id="box" style="border: solid 1px black;width:100px;height:50px;"></div>
12<div class="hako1" id="box1" style="border: solid 1px black;width:100px;height:50px;"></div>
13
14<div class="hako2"id="box2" style="border: solid 1px black;width:100px;height:50px;"></div>
15    <input type="checkbox" onclick="hakoClick()">メニュー１
16    <input type="checkbox" onclick="hakoClick1()">メニュー２
17    <input type="checkbox" onclick="hakoClick2()">メニュー３
18    <script>
19      function hakoClick() {
20        irobako = document.getElementById("box");
21        irobako.style.backgroundColor = "black";
22      }
23
24      function hakoClick1() {
25        irobako = document.getElementById("box1");
26        irobako.style.backgroundColor = "red";
27      }
28
29      function hakoClick2() {
30        irobako = document.getElementById("box2");
31        irobako.style.backgroundColor = "blue";
32      }
33    </script>
34</body>
35</html>
36

行動規範の内容に同意します

回答2件

checkboxがoffになったら、実行解除をしたい

実行解除 では、コードを読むまで、「着色の切り替え」と分からないです。
要件は明記したほうが、コードを読んでみようという回答者が増える気がします。

解決方法が分かる方、教えて頂きたいです。

CSS のセレクタを用いて子孫を探索する querySelector(), querySelectorAll() や先祖をたどる
closest() を使ってください。

input[type=checkbox] に data-for属性を持たせ、div#id の id属性値を与える例

html
1<style>
2  .hako, .hako1, .hako2 {
3    border: solid 1px black;width:100px;height:50px;
4  }
5</style>
6
7<p>サンプル</p>
8<div class="hako" id="box"></div>
9<div class="hako1" id="box1"></div>
10<div class="hako2"id="box2"></div>
11<label><input type="checkbox" data-for="box">メニュー１</label>
12<label><input type="checkbox" data-for="box1">メニュー２</label>
13<label><input type="checkbox" data-for="box2">メニュー３</label>
14
15<script>
16  const
17    // helpers
18    qs = selector => document.querySelector(selector),
19    qsa = selector => document.querySelectorAll(selector),
20    // color by boxId
21    colors = {
22      box: "black",
23      box1: "red",
24      box2: "blue" 
25    }
26  ;
27  for( let attachTarget of qsa('input[data-for]') ) {
28
29    attachTarget.addEventListener('click', function ( evt ) {
30      let
31        target = evt.target,    // input[data-for="box"]
32        id = target.dataset.for // data-for属性値
33      ;
34      // div#box の色を変える（三項演算/条件演算）
35      qs( `#${id}` ).style.backgroundColor = target.checked ? colors[id]: "initial";
36    });
37
38  }; // for of
39</script>