在 Apex 表格形式中选择一系列复选框（使用 jQuery）

Question

我正在尝试以顶点表格形式添加同时选择多个复选框的选项：

我最初想编写一些 Javascript，允许使用电子表格软件的直观“标准”方式选择一系列复选框：

1. 选择第一项
2. 按住 shift
3. 选择最后一项

但是为了更容易实现，我决定只使用一个顶点按钮（设置一个请求）。 我的代码应该选择从第一个选择到最后一个选择的所有复选框。但它根本没有，我不明白为什么。

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 键）？

Answer 1

您正在尝试获取下一个复选框，直到最后一个选中的复选框。但是根据 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

Answer 2

试试这个：-

$("#myButton").click(function () {
 var f=$("input[type=checkbox]").index($('input[type=checkbox]:checked').first());    
 var ls = $("input[type=checkbox]").index($('input[type=checkbox]:checked').last());
   for(var i=f;i<=ls;i++)
     {
       $("input[type=checkbox]").eq(i).prop('checked', true);
     }   
  });

  $("#myOtherButton").click(function () {
   $('input[type=checkbox]:checked').prop('checked', false);
  });

Demo

Answer 3

使用checkbox 的父级tr 尝试以下操作，

var start = $firstChecked.parents('tr');
var last = $lastChecked.parents('tr');

$(start).nextUntil(last).each(function(){
    $(':checkbox',this).prop('checked',true);
});

Demo