如何檢查前 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)來獲取復選框的集合。 所以你只需要計算索引並構建一個完整的選擇器。