Javascript Or Jquery To Check First 20 Checkboxes, Then Next 20 And So On

Is it possible to use JavaScript or jQuery to do the above? I'm imagining a link for each, something like: Check 1-20Check 21-40

Solution 1:

Is it possible to use JavaScript or jQuery to do the above?

Yes. There are lots of ways to do it. And if you can do it in jQuery you can do it in "plain" JavaScript given that jQuery is written in JavaScript.

Here's one way:

$(document).ready(function() {
   var $cbs = $('input:checkbox[name="select[]"]'),
       $links = $("a"); // you probably don't want _all_ links,// so add a class or something.
   $links.click(function() {
      var start = $links.index(this) * 20,
          end = start + 20;
      $cbs.slice(start,end).prop("checked",true);
   });
});

Demo: http://jsfiddle.net/nnnnnn/Q6SxW/

This takes the index of the particular link that was clicked and uses it to figure out the range of checkboxes to check, then it checks those checkboxes...

Solution 2:

There's lots of ways to do this.

With your current HTML, the best way would simply be to iterate over the elements, and select them individually;

functionselect(start, end) {
    for (var i=start;i<end;i++) {
        $('.checkbox[value="' + i + '"]').prop('checked', true);
    }
}

Although it would be much more efficient if you could add a unique ID to each of the elements (be aware that prior to HTML5, you couldn't start an ID with a number, so you might need to prefix it with something;

functionselect(start, end) {
    for (var i=start;i<end;i++) {
        document.getElementById("prefix_" + i).checked = true;
    }
}

In terms of how to match <a href=#>Check 1-20</a> to select(1,20) dynamically, the best way would be to add a common class to the hyperlinks, and use data attributes to set the minimum and max;

<a href="#" class="highlight" data-min="1" data-max="20">Check 1-20</a>

Then:

$(document).on('click', '.highlight', function (e) {
    event.preventDefault();

    var self = $(this);

    select(self.data('min'), self.data('max'));
});

You could also parse the text of the hyperlink manually if you wanted (and avoid data attributes;

$(document).on('click', 'a', function (e) {
    event.preventDefault();

    var values = $(this).text().match(/ (\d+)-(\d+)/);

    select(parseInt(values[1], 10), parseInt(values[2], 10));
});

Solution 3:

This JQUERY code will do it for you in simple way.

$('[name="select[]"]').slice(start,end).prop("checked",true);

EXAMPLES

just use this function.. If you want to check first 20 then

$('[name="select[]"]').slice(0,20).prop("checked",true);

if you want to check 30 to 40 check box then use

$('[name="select[]"]').slice(30,40).prop("checked",true);

Solution 4:

There is no need for a loop, you can just use the following where X is the start index and Y is the end index.

 $('input[name='select[]']:gt(X):lt(Y)').attr("checked", true); 

 $('input[name='select[]']:gt(0):lt(20)').attr("checked", true);

Turn this in to a function similar to Rory's post and it would be dynamic (without the looping).

Solution 5:

You can do it this way ..

<ahref=#rel="1-20">Check 1-20</a><ahref=#rel="21-40">Check 21-40</a><ahref=#rel="41-60">Check 41-60</a>

I have added rel attribute to your links, and I will use it to find elements.

Attach click event:

$('#id_of_element_where_links_are a').click(function(){
    var rel = $(this).attr('rel').split('-');
    var start = parseInt(rel[0])-1;
    var end = parseInt(rel[1]);
     //i have start and end element now
     $('input[type="checkbox"]:eq('+start+')').attr('checked', 'checked');
    var ellementTill = $('input[type="checkbox"]:eq('+end+')');
    //now when I have end element I will check all from start to end
    $('input[type="checkbox"]:eq('+start+')').nextUntil(elementTill, "input").attr('checked','checked');

});

So what I have done, I have added rel attribute to links, then used them to get range: e.g. 1-20 is from 1 to 20. End I have decreased from by one because elements are indexed from 0. Then I have searched for end element and checked all elements till the end element. End element won't be checked that is the reason I didn't decreased 20 by 1.