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

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 个复选框的工作示例，但建议不要有这么多复选框，在这种情况下用户体验非常糟糕。

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

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

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

我希望你能明白。 这很容易。

Answer 3

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

原始答案将它们作为

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

选择器：

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

将匹配 where then 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)来获取复选框的集合。 所以你只需要计算索引并构建一个完整的选择器。