Selecting a Range of Checkboxes in an Apex Tabular Form (using jQuery)

Question

I'm trying to add the option of selecting multiple checkboxes at the same time in an apex tabular form:

I originally wanted to write some Javascript allowing to select a range of checkboxes using the intutive "standard" way of spreadsheet software to:

select first item
press & hold shift
select last item

But for the sake of easier implementation, I decided to just use an apex button (setting a REQUEST). My code should select all checkboxes from the first selected to the last selected. But it simply doesn't and I can't see why.

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);
});

I'm almost sure that I am doing something wrong with nextUntil because

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

works just fine.

[JSFiddle] (using the copied html code from apex)

What is wrong with my javascript code?
Is it possible to code the "intuitive way" with jQuery (logging the shift key)?

`nextUntil` does not support a callback. – Shaunak D Jul 09 '14 at 11:04 — Shaunak D, Jul 09 '14 at 11:04
Here's a solution with shift: http://jsfiddle.net/W2B5U/34/ – cdMinix Jul 09 '14 at 11:36 — cdMinix, Jul 09 '14 at 11:36

score 1 · Answer 1 · answered Jul 09 '14 at 11:10

try this :-

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

Bhushan Kawadkar · Accepted Answer · 2014-07-09T11:18:56.267

1

You are trying to get next checkbox until last checked checkbox. But as per HTML DOM structure, all checkboxes are not siblings hence cannot use .nextUntil(). But they are present in each sibling trs, so find first and last trs and check the checkboxes inside tr between them.

Try this :

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

edited Jul 09 '14 at 11:18

answered Jul 09 '14 at 11:12

Bhushan Kawadkar

28,279
5
35
57

Thanks, didn't know nextUntil() only works for siblings. – cdMinix Jul 09 '14 at 11:17
concerning the shift+select problem: is it (theoretically) possible with jQuery? – cdMinix Jul 09 '14 at 11:21
1

check this, may help you http://stackoverflow.com/questions/659508/how-can-i-shift-select-multiple-checkboxes-like-gmail – Bhushan Kawadkar Jul 09 '14 at 11:23

score 1 · Answer 3 · answered Jul 09 '14 at 11:13

1

Try the following using tr parent of checkbox,

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

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

Demo

answered Jul 09 '14 at 11:13

Shaunak D

20,588
10
46
79

Selecting a Range of Checkboxes in an Apex Tabular Form (using jQuery)

3 Answers3

Demo