如何检查前 200 个 chekboxes ，然后是下一个 200 等等？

Question

Is it possible to use javascript or jquery to do the above ?

<a href=#>Check 1-200</a>
<a href=#>Check 201-401</a>
<a href=#>Check 402-602</a>

<input type='checkbox' name='checkbox[1]' value='1'>
<input type='checkbox' name='checkbox[2]' value='2'>
<input type='checkbox' name='checkbox[3]' value='3'>
<input type='checkbox' name='checkbox[4]' value='4'>

i tried the following code but it doesnt check any boxes! How to fix it ?

 $(document).ready(function() {
       var $cbs = $('input:checkbox[name="checkbox[]"]'),
           $links = $("a"); 

       $links.click(function() {
          var start = $links.index(this) * 200,
              end = start + 200;
          $cbs.slice(start,end).prop("checked",true);
       });
    });

Answer 1

This is the working eg of first 3 and next 3 check boxes, but as suggestion please don't have these many check boxes, the user experience is very bad in this case.

 $(document).ready(function() { var $cbs = $('input:checkbox'), $links = $("a"); $links.click(function() { var start = $links.index(this) * 3, end = start + 3; $cbs.slice(start,end).prop("checked",true); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href=#>Check 1-3</a> <a href=#>Check 4-7</a> <input type='checkbox' name='checkbox[1]' value='1'> <input type='checkbox' name='checkbox[2]' value='2'> <input type='checkbox' name='checkbox[3]' value='3'> <input type='checkbox' name='checkbox[4]' value='4'> <input type='checkbox' name='checkbox[4]' value='5'> <input type='checkbox' name='checkbox[4]' value='6'> <input type='checkbox' name='checkbox[4]' value='7'>

Answer 2

I assume you generate all checkboxes using server side language. Simply inside the loop where you generate them, give them a common class name per every 200 checkboxes - like part_200 then part_400 etc.

Once you have that class, it will be easier for you to reference checkboxes in JS. You will be able to select all checkboxes where class name equals part_200 or part_400 .

I hope you get the idea. It's very easy.

Answer 3

The problem is in your jQuery selector: input:checkbox[name="checkbox[]"] that will return an empty list (no checkboxes is named exactly like that). And you cannot do regexp with jQuery selector. What I would do is to use a special class or attribute for each of the checkbox you want to select and query them this way. In the below example I used checkToCheck .

 $(document).ready(function() { console.log("here"); var $cbs = $('input:checkbox.checkToCheck'), $links = $("a"); $links.click(function() { var start = $links.index(this) * 200, end = start + 200; $cbs.slice(start,end).prop("checked",true); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href=#>Check 1-200</a> <a href=#>Check 201-401</a> <a href=#>Check 402-602</a> <input type='checkbox' name='checkbox[1]' class="checkToCheck" value='1'> <input type='checkbox' name='checkbox[2]' class="checkToCheck" value='2'> <input type='checkbox' name='checkbox[3]' class="checkToCheck" value='3'> <input type='checkbox' name='checkbox[4]' class="checkToCheck" value='4'>

Answer 4

This question has checkboxes defined as:

 <input type='checkbox' name='checkbox[1]' value='1'>

The original answer had them as

 <input type='checkbox' name='checkbox[]' value='1'>

The selector:

$('input:checkbox[name="select[]"]')

will match where then name matches explicitly "select[]" but the name is now "select[1]"

Easiest option at this point is to use a different selector, eg put the checkboxes inside a div, eg:

<div id='selectboxes'>
     <input type='checkbox' name='checkbox[1]' value='1'>

and use

$('div :checkbox')

---

Another option might be to give your checkboxes page numbers when they are generated, eg:

 <input type='checkbox' name='checkbox[1]' value='1' data-page='1'>

then in your click handler:

 $(':checkbox[data-page="' + $links.index(this) + '"]')

Answer 5

You can use selectors :gt(n) and :lt(n) to get collection of checkboxes. So you just have to calculate indexes and construct a full selector.