Question

是否可以使用javascript或jquery来执行上述操作？

<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'>

我尝试了以下代码，但它没有检查任何框！如何解决？

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

这是前3个和后3个复选框的工作，但作为建议请不要有这么多复选框，在这种情况下用户体验非常糟糕。

＆＃13;

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

＆＃13;

<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'>

＆＃13;

Answer 2

我假设您使用服务器端语言生成所有复选框。只需在生成它们的循环内部，每200个复选框为它们指定一个公共类名称 - 例如part_200然后part_400等。

一旦有了这个类，你就可以更容易地引用JS中的复选框了。您可以选择类名等于part_200或part_400的所有复选框。

我希望你明白这个主意。这很容易。

Answer 3

问题在于你的jQuery选择器：input:checkbox[name="checkbox[]"]将返回一个空列表（没有复选框的命名完全相同）。你不能用jQuery选择器做regexp。我要做的是为每个要选择的复选框使用特殊的类或属性，并以这种方式查询它们。在下面的示例中，我使用了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

此问题的复选框定义为：

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

original answer将它们视为

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

选择器：

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

将匹配，然后 name 明确匹配“select []”，但名称现在是“select [1]”

此时最简单的选择是使用不同的选择器，例如将复选框放在div中，例如：

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

并使用

$('div :checkbox')

另一种选择可能是在生成复选框时给出复选框页码，例如：

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

然后在你的点击处理程序中：

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

Answer 5

您可以使用选择器:gt(n)和:lt(n)来收集复选框。所以你只需要计算索引并构建一个完整的选择器。

如何检查前200个chekbox，然后下200个，依此类推？

5 个答案: