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

是否可以使用JavaScript或jQuery来执行上述操作?

我在想象每个人的链接,例如:

Check 1-20 Check 21-40 Check 41-60 

等等..

虽然我的复选框是用PHP动态生成的(我有很多):

    

如果有人有任何想法或最佳方式去做这件事,我将不胜感激:)

是否可以使用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/

这将获取所单击的特定链接的索引,并使用它来确定要检查的复选框的范围,然后检查这些复选框…

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

使用当前的HTML,最好的方法是迭代元素,然后单独选择它们;

 function select(start, end) { for (var i=start;i 

虽然如果你可以为每个元素添加一个唯一的ID会更有效率(请注意,在HTML5之前,你无法使用数字启动一个ID,所以你可能需要在它前面加上一些东西;

 function select(start, end) { for (var i=start;i 

在如何匹配Check 1-20以动态select(1,20) ,最好的方法是在超链接中添加公共类,并使用data属性来设置最小和最大;

 Check 1-20 

然后:

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

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

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

例子

只需使用此function..如果你想先检查20然后

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

如果要检查30到40复选框,请使用

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

不需要循环,您可以使用以下内容,其中X是起始索引,Y是结束索引。

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

将其转换为类似于Rory的post的函数,它将是动态的(没有循环)。

你可以这样做..

 Check 1-20 Check 21-40 Check 41-60 

我已将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的原因。

你可以试试这个:

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

有了这个 :

 Check 1-20 Check 21-40 Check 41-60    

我认为这也会奏效:

 function checkOptions(from, to){ var checksArray = $(".checkbox input[type=checkbox]"); for(var i = from; i < to; i++){ $(checksArray[i]).attr("checked", true); } return; }