我试图添加以顶点表格形式同时选择多个复选框的选项:
我最初想编写一些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