選擇特定範圍內的所有複選框？

Question

這裏是我的代碼：

$(".all_checkboxes").click(function() { 
 
    $('input:checkbox').not(this).prop('checked', this.checked); 
 
});

td, th{ 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2>Section 1:</h2> 
 
<table> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes" /></th> 
 
     <th>Names</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>twitter</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>instagram</td> 
 
    </tr> 
 
</table> 
 

 
<h2>Section 2:</h2> 
 
<table> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes" /></th> 
 
     <th>Ids</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>454756</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>547498</td> 
 
    </tr> 
 
</table>

我的問題是在上面的小提琴幾乎清晰。正如你所看到的，目前所有的複選框都將在這兩個部分中被選中。我需要做的就是爲jQuery選擇器定義一個範圍。我怎樣才能做到這一點？

Answer 1

$('input:checkbox')將搜索所有複選框。您必須導航至最近的table並在其中搜索複選框。

$(".all_checkboxes").click(function() { 
 
    $(this) 
 
     .closest('table') 
 
     .find('input:checkbox') 
 
     .not(this) 
 
     .prop('checked', this.checked); 
 
});

td, th{ 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2>Section 1:</h2> 
 
<table> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes" /></th> 
 
     <th>Names</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>twitter</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>instagram</td> 
 
    </tr> 
 
</table> 
 

 
<h2>Section 2:</h2> 
 
<table> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes" /></th> 
 
     <th>Ids</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>454756</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>547498</td> 
 
    </tr> 
 
</table>

Answer 2

1. 如果你想在表中。使用closest()獲取表格中的複選框
2. 使用更改事件而不是單擊。

$(".all_checkboxes").change(function() { 
 
    $(this).closest('table').find(':checkbox').not(this).prop('checked', this.checked); 
 
});

td, th{ 
 
    border: 1px solid gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2>Section 1:</h2> 
 
<table> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes" /></th> 
 
     <th>Names</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>twitter</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>instagram</td> 
 
    </tr> 
 
</table> 
 

 
<h2>Section 2:</h2> 
 
<table> 
 
    <tr> 
 
     <th><input type="checkbox" class="all_checkboxes" /></th> 
 
     <th>Ids</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>454756</td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td>547498</td> 
 
    </tr> 
 
</table>

Answer 3

看起來這將是一個重複的動作，所以你應該考慮具有比現有使用jQuery的那些更快的解決方案。

此外，您的標記不是很好的準備這些行動。如果更新標記是一個選項。你可以去如下：

<h2>Section 1:</h2> 
<table> 
    <tr> 
     <th><input type="checkbox" data-checkall="names" class="all_checkboxes" /></th> 
     <th>Names</th> 
    </tr> 
    <tr> 
     <td><input type="checkbox" data-rel="names" /></td> 
     <td>twitter</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" data-rel="names" /></td> 
     <td>instagram</td> 
    </tr> 
</table> 

<h2>Section 2:</h2> 
<table> 
    <tr> 
     <th><input type="checkbox" data-checkall="section" class="all_checkboxes" /></th> 
     <th>Ids</th> 
    </tr> 
    <tr> 
     <td><input type="checkbox" data-rel="section" /></td> 
     <td>454756</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" data-rel="section" /></td> 
     <td>547498</td> 
    </tr> 
</table> 

本地JS版本（性能最快）：

function checkAllHandler(e){ 
    var state = this.checked; 
    Array.prototype.forEach.call(
    document.querySelectorAll("[data-rel=" + this.dataset.checkall+"]"), 
    function(x){ 
     x.checked = state; 
    } 
) 
} 

Array.prototype.forEach.call(document.querySelectorAll(".all_checkboxes"), function(x){ 
    x.addEventListener("click", checkAllHandler); 
}) 

Codepen：https://codepen.io/Mchaov/pen/vexprr?editors=1010