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

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

有很多方法可以做到這一點。

對於當前的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 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。結束由於元素從0開始索引，我從1減少了。然后我搜索了結束元素並檢查所有元素，直到結束元素。 不會檢查End元素，這是我沒有將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;
}