<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <form>
      <fieldset>
        <legend>좋아하는 음식을 고르세요:</legend>
        <label for="songpyeon">
          <input
            type="checkbox"
            id="songpyeon"
            name="food"
            value="songpyeon"
            class="checkbox"
            checked
          />
          <span class="check-mark"></span>
          송편
        </label>

        <label for="friedShrimp">
          <input
            type="checkbox"
            id="friedShrimp"
            name="food"
            value="friedShrimp"
            class="checkbox"
          />
          <span class="check-mark"></span>
          새우튀김
        </label>
      </fieldset>
    </form>
  <span class="selectFood"></span>
</body>
</html>
.checkbox {
  display: none;
}

label {
  display: block;
  margin-bottom: 10px;
}

.check-mark {
  content: '';
  width: 20px;
  height: 20px;
  background-color: #d9d9d9;
  border-radius: 1px;
  display: inline-block;
  vertical-align: text-bottom;
}

input:checked + .check-mark {
  background-color: #2ac1bc;
  transition: 0.1s;
}

input:checked + .check-mark::after {
  content: '';
  width: 10px;
  height: 5px;
  background: #2ac1bc;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  transform: translate(30%, 50%) rotate(-45deg);
  transition: 0.1s;
}
var checkboxes = document.querySelectorAll("input[type=checkbox][name=food]");
let checkedFoods = [];



document.addEventListener("DOMContentLoaded", e => {
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change',  (event) => {
      checkedFoods = Array.from(checkboxes).filter(i => i.checked).map(i => i.value); 
      
      document.querySelector('.selectFood').innerText =  checkedFoods;
    });
  });
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.