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是所需的确切功能。

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

1 个答案: