Jquery Checkbox Shift Click不起作用答案

【问题标题】：Jquery Checkbox Shift Click not workingJquery Checkbox Shift Click不起作用
【发布时间】：2018-03-29 10:23:59
【问题描述】：

https://jsfiddle.net/5r60uqtp/2/

如果我单击第一个输入，然后按住 shift 并单击第三个输入，为什么不选择所有 3？

<ul>
  <li><input type="checkbox" class="grid-item">One</li>
  <li><input type="checkbox" class="grid-item">Two</li>
  <li><input type="checkbox" class="grid-item">Three</li>
</ul>

【问题讨论】：

为什么会有这种行为？我从来没有见过它。而且您的 Fiddle 中的代码看起来远非尝试去做。
我试图简化这一点以显示我的要求。我大部分时间和尝试都放在应用程序登录区域。将继续致力于 JS Fiddle。

标签： jquery checkbox

【解决方案1】：

我想我得到了你想要达到的目标......

但由于鼠标事件与键盘事件不同，我可能有一个替代方案。如果您mouseover 复选框同时按住 shift 键以切换其选中状态怎么办？

应该是这样的：

var shiftHeld = false;

// Turn the shiftHeld flag to true
$(document).on("keydown",function(e){
  if(e.shiftKey){
    shiftHeld = true;
  }
});

// Turn the shiftHeld flag to false
$(document).on("keyup",function(e){
    shiftHeld = false;
});

// On mouseover, if shifHeld is true, toggle checked state of the mouseovered checkboxes
$("input[type='checkbox'].grid-item").on("mouseover",function(){
  if(shiftHeld){
    $(this).prop("checked",!$(this).prop("checked"));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><input type="checkbox" class="grid-item">One</li>
  <li><input type="checkbox" class="grid-item">Two</li>
  <li><input type="checkbox" class="grid-item">Three</li>
</ul>

【讨论】：

这比我想象的还要好！
刚刚实现了这个。我真的很感激它，它的效果非常好。