我试图添加以顶点表格形式同时选择多个复选框的选项:

我最初想编写一些Javascript,以使用电子表格软件的直观“标准”方式来选择一系列复选框,以便:


选择第一项
按住Shift键
选择最后一项


但是为了简化实施,我决定只使用一个顶点按钮(设置一个REQUEST)。
我的代码应选择从第一个选择到最后一个选择的所有复选框。但这根本没有,我也看不出原因。

var $firstChecked = $('input[type=checkbox]:checked').first();
var $lastChecked = $('input[type=checkbox]:checked').last();
$firstChecked.nextUntil($lastChecked, 'input[type=checkbox]').each(function () {
    $(this).prop('checked', true);
});


我几乎可以确定nextUntil做错了什么,因为

$('input[type=checkbox]:checked').prop('checked', false);


效果很好。

[JSFiddle](使用从apex复制的html代码)


我的JavaScript代码有什么问题?
是否可以编码
jQuery的“直观方式”(记录Shift键)?

最佳答案

您正在尝试获取下一个复选框,直到最后一个选中的复选框。但是按照HTML DOM结构,所有复选框都不是同级的,因此不能使用.nextUntil()。但是它们存在于每个同级trs中,因此找到第一个和最后一个trs并选中它们之间的tr中的复选框。

尝试这个 :

$("#myButton").click(function () {
    var $firstChecked = $('input[type=checkbox]:checked:first').closest('tr');
    var $lastChecked = $('input[type=checkbox]:checked:last').closest('tr');
    $firstChecked.nextUntil($lastChecked).find('input[type=checkbox]').prop('checked', true);
});


Demo

10-07 19:08
查看更多