如何使用checklist-model指令切换+单击以选择多个复选框？

Question

有没有办法转换+点击以使用此指令选择多个复选框，就像我们在Gmail中一样？

示例：

1. 点击第一行的复选框。
2. 按住SHIFT键。
3. 点击第10行的复选框。

结果：将选择前10行。

Answer 1

以下是如何执行此操作的示例，当选择器用于更多只有复选框的内容时，需要将选择器更改为更具体的内容。

它的工作原理是扫描所有输入并查看它是否被检查，是否切换了一个布尔值，这将导致每个元素切换到检查，直到这与所点击的项目匹配，然后在不需要的情况下突破循环再检查一下。

$("[type='checkbox']").click(function(evt) {
    if (evt.shiftKey){
      let item = $(this);
      let hitfirstChecked = false;
      $("#wrapper-check input").each(function(){
        if($(this).is(":checked")){
          hitfirstChecked = true;
        }
        if(hitfirstChecked){
          $(this).prop('checked', true);
        }
        if(item.is($(this))){
          return false;
        }
      });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="wrapper-check">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
<input type="checkbox" value="6">6
<input type="checkbox" value="7">7
<input type="checkbox" value="8">8
</span>