Question

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

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

选择第一项
按＆amp;持有班次
选择最后一项

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

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

试试这个： -

$("#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 2

您正试图获取下一个复选框，直到最后一次选中复选框。但是根据HTML DOM结构，所有复选框都不是兄弟，因此不能使用.nextUntil()。但它们存在于每个兄弟姐妹中，所以找到第一个和最后一个，并检查它们之间的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 3

使用tr的父checkbox

尝试以下操作

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

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

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

3 个答案:

Demo