First Step

Multiple-Checkbox

쉬프트를 눌리고 클릭하면 사이에 체크된 것 사이에있는 모든 항목이 체크됩니다.

html: 파일명 index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Checkbox</title>
  </head>
  <body>
    <div class="inbox">
      <div class="item">
        <input type="checkbox">
        <p>미래학</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>수학</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>과학</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>사회학</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>철학</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>경제학</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>역사</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>컴퓨터공학</p>
      </div>
      <div class="item">
        <input type="checkbox">
        <p>어렵다</p>
      </div>
    </div>
    <script type="text/javascript" src="javascript.js"></script>
  </body>
</html>

css: 파일명 style.css

  html {
    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
    background: #ffc600;
  }
  .inbox {
    max-width: 400px;
    margin: 50px auto;
    background: white;
    border-radius: 5px;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
  }

  .item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
  }

  .item:last-child {
    border-bottom: 0;
  }

  input:checked + p {
    background: #F9F9F9;
    text-decoration: line-through;
  }

  input[type="checkbox"] {
    margin: 20px;
  }

  p {
    margin: 0;
    padding: 20px;
    transition: background 0.2s;
    flex: 1;
    font-family: 'helvetica neue';
    font-size: 20px;
    font-weight: 200;
    border-left: 1px solid #D1E2FF;
  }

javascript: 파일명 javacript.js

  var checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
  var lastChecked;
  function handleCheck(e) {
    var inBetween = false;
    var checkForThis = this;
    if (e.shiftKey && this.checked) {
      checkboxes.forEach(function(checkbox) {
        if (checkbox === checkForThis || checkbox === lastChecked) {
          inBetween = !inBetween;
          console.log('Starting to check them in between!');
        }
        if (inBetween) {
          checkbox.checked = true;
        }
      });
    }
    lastChecked = this;
  }
  checkboxes.forEach(function(checkbox){ checkbox.addEventListener('click', handleCheck) });

es6: escma script 2015

아래 코드도 같은 결과가 실행됩니다. 아래는 ES6 문법을 사용한 코드입니다. **const, let, arrow function( () => {} )**이 사용되었습니다. 가볍게 검색해보는걸 추천합니다.

// 아래 코드도 같은 결과가 실행됩니다.
// 아래는 ES6 문법을 사용한 코드입니다.
// const, let, arrow function이 사용되었습니다.
// 지금은 몰라도 되지만, 가볍게 검색해보는걸 추천합니다
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');

let lastChecked;

function handleCheck(e) {
  // Check if they had the shift key down
  // AND check that they are checking it
  let inBetween = false;
  if (e.shiftKey && this.checked) {
    // go ahead and do what we please
    // loop over every single checkbox
    checkboxes.forEach(checkbox => {
      if (checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
        console.log('Starting to check them in between!');
      }
      if (inBetween) {
        checkbox.checked = true;
      }
    });
  }
  lastChecked = this;
}

checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));