입문

jQuery 등 JavaSript를 쉽게 처리할 수 있는 편리한 파일이 있지만
이해를 깊게 하기 위해 이번에도 편리한 것을 사용하지 않고 코드를 처음부터 기술했다.
체크 버튼을 누른 후 해당하는 3색 버튼을 표시하는 기능을 만듭니다.

HTML

code.html

<div class="all_section">
    <div class="color">
      <p>Check-Box</p>
      <div class="Check_word">チェック</div>
    </div>
  <div class="list">
    <!--チェック機能の作成-->
    <div class="section">
      <input type="checkbox" id="check_one1" data-name="あか">赤</input>
      <input type="checkbox" id="check_one2" data-name="あお">青</input>
      <input type="checkbox" id="check_one3" data-name="きいろ">黄色</input>
    </div>
  </div>
    <!--チェック機能に対応するボタンを作成-->
    <div class="images">
      <input type="button" class="one1" data-name="あか"/>
      <input type="button" class="one2" data-name="あお"/>
      <input type="button" class="one3" data-name="きいろ"/>
    </div>
</div>

CSS

code.css

/*全体への装飾*/
.all_section {
  width: 100%;
  background-color: white;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*タイトル画面の装飾*/
.color {
  overflow: hidden;
  margin-top: -20px;
  height: 200px;
  background-color: #3c3d3d9a;
  color: antiquewhite;
  border-radius: 40px;
}
/*タイトル画面の文字への装飾*/
.color p {
  margin-top: 80px;
  font-size: 25px;
}
/*チェック機能部分の装飾*/
.list {
  width: 100%;
  margin-top: 100px;
  font-size: 20px;
  color: antiquewhite;
  border-radius: 20px;
  background-color: #9cce8b;
}
/*チェックの装飾*/
.list input {
  margin: 10px;
  color: #3c3d3d9a;
  border-radius: 20px;
}
/*ボタン機能の装飾*/
.images input {
  width: 100px;
  height: 100px;
  margin-top: 100px;
  margin-left: 10px;
  margin-right: 10px;
}
/*赤ボタンの装飾*/
.one1 {
  background-color: #fa1919;
}
/*青ボタンの装飾*/
.one2 {
  background-color: #1900ff;
}
/*黄色ボタンの装飾*/
.one3 {
  background-color: #fbff04;
}

JavaScript

code.js

// 画面の対象の画像を全て隠す関数
function hideAllImages() {
  const images_off = document.querySelectorAll('.images input');
  images_off.forEach(function (image) {
    //画像を非表示
    image.style.visibility = "hidden";
  });
}

// 値が変更された時に呼ばれる関数
function onChangeValue() {
  // 全ての画像を非表示
  hideAllImages();

  //input（チェックボタン）のデータをすべて取得
  const sec_checkboxes = document.querySelectorAll('.section input');
  //imagesのデータをすべて取得
  const all_images = document.querySelectorAll('.images input');

  //1つずつ取得したデータのdata-nameを１つずつ取得
  sec_checkboxes.forEach(function (checkbox) {
    const checkbox_name = checkbox.dataset.name;

    //その中でもしチェックされていたらimagesデータを取得
    if (checkbox.checked) {
      all_images.forEach(function (image) {
        const image_name = image.dataset.name;

        //該当のdata-nameがあったら表示
        if (image_name.indexOf(checkbox_name) >= 0) {
          image.style.visibility = "visible";
        }
      });
    }
  });
}

// 画面を読み込んだときに呼ばれる関数
function onLoad() {
  // 全て非表示
  hideAllImages();

  //  値が変更された時に呼ばれる関数(イベントを登録する)
  document.addEventListener("change", onChangeValue);
}
//ウィンドウがロードした時に起動
window.addEventListener("load", onLoad);

완성

왼쪽부터 빨간색과 파란색, 빨간색과 파란색과 노란색을 검사할 때.

총결산

기본적인 일이지만 코드가 길어지기 때문에 자신이 쓴 코드에 필기를 꼼꼼히 해야 한다.
함수를 만들어 자세히 구분해 이해하기 쉽게 만들면 재검토할 때 도움이 된다.
이번 기사를 쓰기 위해 재검토할 때 나는 다시 한 번 중요하다고 느꼈다.