Muscardinus

Checkbox 본문

FrontEnd/Basic Skills

Checkbox

Muscardinus 2022. 3. 21. 00:35
728x90
<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Check Box</title>
  </head>
  <body>
    <form>
      <p>좋아하는 음식</p>
      <div>
        <input type="checkbox" id="favoriteFood1" name="food" value="pizza" />
        <label for="favoriteFood1">Pizza</label>
        <input type="checkbox" id="favoriteFood2" name="food" value="steak" />
        <label for="favoriteFood2">Steak</label>
        <input type="checkbox" id="favoriteFood3" name="food" value="noodle" />
        <label for="favoriteFood3">Noodle</label>
      </div>
      <p>관심사</p>
      <div>
        <input type="checkbox" id="interest1" name="interest" value="cooking" />
        <label for="interest1">Cooking</label>
        <input type="checkbox" id="interest2" name="interest" value="Bike" />
        <label for="interest2">Bike</label>
        <input type="checkbox"id="interest3" name="interest" value="swimming" />
        <label for="interest3">Swimming</label>
        <input type="checkbox" id="interest4" name="interest" value="piano" />
        <label for="interest4">Piano</label>
        <input type="checkbox" id="interest5" name="interest" value="book" />
        <label for="interest5">Book</label>
      </div>
      <div class="SubmitButtonContainer">
        <button type="submit">확인</button>
      </div>
    </form>
    <span class="CurrentItem"></span>
    <script src="app.js"></script>
  </body>
</html>
const $currentItem = document.querySelector('.CurrentItem');
const $formTag = document.querySelector('form');

// Write code here.
$formTag.addEventListener("submit", (event) => {
   event.preventDefault();
   const formRecords = Array.from(new FormData($formTag));
   const foodRecords = formRecords.filter((record) => record[0] === "food");
   const interestRecords = formRecords.filter((record) => record[0] === "interest");

   if (foodRecords.length === 0 || interestRecords.length === 0) {
       $currentItem.innerHTML = "폼을 모두 작성해주세요.";
       return;
   }
   $currentItem.innerHTML = `
    좋아하는 음식 : ${foodRecords.map((record) => record[1]).join(", ")}<br/>
    관심사      : ${interestRecords.map((record) => record[1]).join(", ")}
   `;
});
728x90

'FrontEnd > Basic Skills' 카테고리의 다른 글

Drag and Drop 라이브러리  (0) 2022.07.05
React Router 간단 구현  (0) 2022.07.03
Instant Search  (0) 2022.03.21
Tabs  (0) 2022.03.21
Carousel  (0) 2022.03.20
'FrontEnd/Basic Skills' Related Articles more
Comments