javascript - 如果按下 shift 键选中，则选中当前复选框上方的所有复选框

Question

我在 html 正文中有很多复选框，一些复选框有特定的 css 类。

我只希望每当我选择一个复选框并按下 shift 键时，所有复选框仅在当前复选框上方，并且仅在先前事件中已选中(选中)的复选框下方，选中(选中)相应的 css 类在 DOM 中，应该自动检查(选择)。

其余所有复选框应保持不变。

这是我正在尝试做的:

html

<input type="checkbox" class="select-row"/>
<input type="checkbox" class="select-row"/>
<input type="checkbox" />
<input type="checkbox" class="select-row"/>
<input type="checkbox" class="select-row"/>
<input type="checkbox" />
<input type="checkbox" class="select-row"/>
<input type="checkbox" class="select-row"/>
<input type="checkbox" />
<input type="checkbox" class="select-row"/>

js:

$('.select-row').click(function(e){
if ( e && e.originalEvent.type === "click" && e.originalEvent.shiftKey === true) {
    //what to write?
  }
});

这是jsfiddle http://jsfiddle.net/839pS/8/

我该怎么做？

Answer 1

使用 .prevUntil()函数来选择前面的复选框，然后对它们执行任何需要的操作(例如将它们的 checked 属性设置为 true):

var $previousCheckboxes = $(this).prevUntil(':checked', 'input[type="checkbox"]');
$previousCheckboxes.prop('checked', true);

Updated jsFiddle

我不完全确定确切的停止条件，所以为了示例的目的，我只是选择了“它到达的第一个选中的复选框”。在对该问题的评论中进行讨论后，this jsFiddle正是所需的功能。