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

Question

是否可以使用 JavaScript 或 jQuery 来完成上述操作？

我正在为每个人设想一个链接，例如：

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

等等..

虽然我的复选框是像这样使用 PHP 动态生成的（我有很多）：

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

是否可以使用 JavaScript 或 jQuery 来完成上述操作？

是的。有很多方法可以做到这一点。如果你可以用 jQuery 来做，那么你可以用“普通”的 JavaScript 来做，因为 jQuery 是用 JavaScript 编写的。

这是一种方法：

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

演示：http://jsfiddle.net/nnnnnn/Q6SxW/

这会获取被点击的特定链接的索引，并使用它来确定要检查的复选框的范围，然后检查这些复选框...

Answer 2

有很多方法可以做到这一点。

使用您当前的 HTML，最好的方法就是遍历元素，然后单独选择它们；

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

虽然很多如果你可以为每个元素添加一个唯一的 ID 会更有效（请注意，在 HTML5 之前，你不能用数字开始一个 ID，所以你可能需要在它前面加上一些东西；

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

关于如何动态匹配<a href=#>Check 1-20</a>到select(1,20)，最好的方法是在超链接中添加一个通用类，并使用data属性设置最小值和最大值；

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

然后：

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

    var self = $(this);

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

如果需要，您还可以手动解析超链接的文本（并避免使用data 属性；

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

此 JQUERY 代码将以简单的方式为您完成。

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

示例

只需使用此功能.. 如果你想检查前 20 个然后

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

如果您想选中 30 到 40 复选框，请使用

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

Answer 4

不需要循环，你可以使用下面的代码，其中 X 是开始索引，Y 是结束索引。

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

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

将其转换为类似于 Rory 帖子的函数，它将是动态的（没有循环）。

Answer 5

你可以这样做..

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

我已经为你的链接添加了 rel 属性，我将使用它来查找元素。

附加点击事件：

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

});

所以我做了什么，我在链接中添加了 rel 属性，然后用它们来获取范围：例如1-20 是从 1 到 20。结束我从 1 减少了，因为元素从 0 开始索引。然后我搜索了结束元素并检查了所有元素，直到结束元素。不会检查结束元素，这就是我没有将 20 减 1 的原因。

Answer 6

你可以试试这个：

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

有了这个：

<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

我认为这也可以：

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

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

    return;
}