我有一個簡單的同位素網格，帶有復選框輸入，用于對網格中的專案進行排序。這作業正常。問題在于“全部顯示”復選框和不同類別復選框之間的互動。
選中“全部顯示”后，我必須手動取消選中它才能選中任何類別復選框。當我取消選中所有類別時，我希望“全部顯示”自我檢查以指示正在顯示所有類別專案。
How can I have "Show All" uncheck itself when any one or all of the categories are checked?
當所有類別都未選中時，如何讓“全部顯示”自行檢查？
和
- 如何在頁面加載時檢查“全部顯示”？
jQuery
var $container = $('#container').isotope({
itemSelector: '.product',
layoutMode: 'fitRows',
transitionDuration: '0.2s'
});
var $checkboxes = $('#filters input');
$checkboxes.change(function(){
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value );
});
filters = filters.join(', ');
$container.isotope({ filter: filters });
});
CSS
.product {
float: left;
width: 50px;
height: 50px;
border: 1px solid #000;
padding:10px;
text-align:center;
margin: 5px;
}
#container {
width:400px;
HTML
<div id="filters">
<label><input type="checkbox" value="*" id="all">Show all</a></li>
<label><input type="checkbox" value=".category1" id="category1">Category 1</label>
<label><input type="checkbox" value=".category2" id="category2">Category 2</label>
<label><input type="checkbox" value=".category3" id="category3">Category 3</label>
</div>
<div id="container">
<div >1</div>
<div >1,2</div>
<div >1,3</div>
<div >2</div>
<div >2,3</div>
<div >3</div>
<div >3,2</div>
<div >1</div>
<div >2</div>
<div >3</div>
<div >2</div>
<div >1</div>
</div>
uj5u.com熱心網友回復：
關于#1 和#2，只需在事件期間檢查哪個目標已更改。您可以通過訪問來做到這一點event.currentTarget。
$checkboxes.change(function(event) {
在此之后，只需添加邏輯：
let currentTarget = event.currentTarget;
// if all is selected, deselect others
if (currentTarget.id == "all")
$("#filters input:not(#all)").prop("checked", false);
else // remove the checked prop from all
$("#all").prop("checked",false);
// if none is checked anymore, check all
if (!$checkboxes.filter(":checked").length)
$("#all").prop("checked", true)
// your code
var filters ...
關于第三個，只需將checked屬性添加到輸入欄位。
<label><input type="checkbox" value="*" checked id="all">Show all</label>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/363317.html
標籤：javascript 查询 复选框 jquery-同位素
上一篇：將vuejs資料附加到div