![](/img/trans.png)
[英]i want to paginate my fetched data so that first top 20 entries will be on first page and then next 20 values on next page on cliucking next button
[英]JavaScript OR jQuery to check first 20 checkboxes, then next 20 and so on
是否可以使用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"/>
如果有人有任何想法或最好的解决方法,将不胜感激:)
是否可以使用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/
这将获取已单击的特定链接的索引,并使用它来确定要检查的复选框的范围,然后检查那些复选框...
此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);
有很多方法可以做到这一点。
对于当前的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));
});
不需要循环,您可以使用以下代码,其中X是开始索引,Y是结束索引。
$('input[name='select[]']:gt(X):lt(Y)').attr("checked", true);
$('input[name='select[]']:gt(0):lt(20)').attr("checked", true);
将此功能转为与Rory的帖子类似的功能,它将是动态的(无循环)。
你可以这样子..
<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。结束由于元素从0开始索引,我从1减少了。然后我搜索了结束元素并检查所有元素,直到结束元素。 不会检查End元素,这是我没有将20减1的原因。
您可以尝试以下方法:
$('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"/>
我认为这也会起作用:
function checkOptions(from, to){
var checksArray = $(".checkbox input[type=checkbox]");
for(var i = from; i < to; i++){
$(checksArray[i]).attr("checked", true);
}
return;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.