js10 - Hold Shift and Check Checkboxes

内容

css部分（自带）

  <style>

    html {
      font-family: 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;
    }

    .details {
      text-align: center;
      font-size: 15px;
    }


  </style>

html部分（自带）

  <div class="inbox">
    <div class="item">
      <input type="checkbox">
      <p>This is an inbox layout.</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Check one item</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Hold down your Shift key</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Check a lower item</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Everything inbetween should also be set to checked</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Try do it with out any libraries</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Just regular JavaScript</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Good Luck!</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Don't forget to tweet your result!</p>
    </div>
  </div>

js部分

<script>
  //获取checkbox
  const boxs = document.querySelectorAll('.inbox input[type="checkbox"]')
  //遍历添加监听，增加点击事件
  boxs.forEach(box => box.addEventListener('click',handleCheck))
  //定义
  let lastChecked;
  function handleCheck(e){
    let inbetween = false;
    //获取shift键 以及当前选中状态
    if(e.shiftKey && this.checked){
      //遍历checkbox
      boxs.forEach(input =>{
        //判断lastChecked是否被重定义 否则则判断checkbox为this 即为true
        if(input === lastChecked || input ===this){
          inbetween = !inbetween
        }
        //粘连事件
        if(inbetween){
          input.checked = true
        }
      })
    }
    //定义lastChecked为this即checkbox，供下次选择提供参考
    lastChecked = this
  }
</script>