JavaScript或jQuery来检查前20个复选框，然后是下20个，依此类推

Question

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

I'm imagining a link for each, something like:

<a href=#>Check 1-20</a>
<a href=#>Check 21-40</a>
<a href=#>Check 41-60</a>

and so on..

whilst my checkboxes are generated dynamically with PHP like this (i have a lot of them):

<input type="checkbox" class="checkbox" name="select[]" value="5153"/>
<input type="checkbox" class="checkbox" name="select[]" value="5154"/>
<input type="checkbox" class="checkbox" name="select[]" value="5155"/>

If anyone has any ideas or best way to go about this, it'll be greatly appreciated :)

Answer 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...

Answer 2

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

Answer 3

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;

function select(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;

function select(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));
});

Answer 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).

Answer 5

You can do it this way ..

<a href=# rel="1-20">Check 1-20</a>
<a href=# rel="21-40">Check 21-40</a>
<a href=# 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: eg 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.

Answer 6

You can try this :

$('a').click(function() {
    $('.checkbox:gt(' + ($(this).index() * 20) + '):lt(' + (($(this).index() * 20) +21) + ')').attr('checked', 'checked');
});

With this :

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



<input type="checkbox" class="checkbox" name="select[]" value="5153"/>
<input type="checkbox" class="checkbox" name="select[]" value="5154"/>
<input type="checkbox" class="checkbox" name="select[]" value="5155"/>

Answer 7

I think this would work too:

function checkOptions(from, to){
    var checksArray = $(".checkbox input[type=checkbox]");

    for(var i = from; i < to; i++){
        $(checksArray[i]).attr("checked", true);
    }

    return;
}