Check/uncheck 在同位素中输入复选框
Check/uncheck input checkboxes in Isotope
我有一个简单的同位素网格,带有复选框输入,用于对网格中的项目进行排序。这工作正常。问题是“显示全部”复选框和不同类别复选框之间的交互。
选中“全部显示”后,我必须手动取消选中它才能选中任何类别复选框。当我取消选中所有类别时,我想让“显示全部”检查自身以指示正在显示所有类别项目。
https://codepen.io/bluedogranch/pen/MWvdyNm
如何在选中任何一个或所有类别时取消选中“全部显示”?
当所有类别都未选中时,如何让“显示全部”自行检查?
和
- 如何在页面加载时选中“显示全部”?
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 class="product category1">1</div>
<div class="product category1 category2 ">1,2</div>
<div class="product category1 category3">1,3</div>
<div class="product category2">2</div>
<div class="product category2 category3">2,3</div>
<div class="product category3">3</div>
<div class="product category3 category2">3,2</div>
<div class="product category1">1</div>
<div class="product category2">2</div>
<div class="product category3">3</div>
<div class="product category2">2</div>
<div class="product category1">1</div>
</div>
关于#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 ...
关于第 3 个,只需在输入字段中添加 checked
属性。
<label><input type="checkbox" value="*" checked id="all">Show all</label>
我有一个简单的同位素网格,带有复选框输入,用于对网格中的项目进行排序。这工作正常。问题是“显示全部”复选框和不同类别复选框之间的交互。
选中“全部显示”后,我必须手动取消选中它才能选中任何类别复选框。当我取消选中所有类别时,我想让“显示全部”检查自身以指示正在显示所有类别项目。
https://codepen.io/bluedogranch/pen/MWvdyNm
如何在选中任何一个或所有类别时取消选中“全部显示”?
当所有类别都未选中时,如何让“显示全部”自行检查?
和
- 如何在页面加载时选中“显示全部”?
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 class="product category1">1</div>
<div class="product category1 category2 ">1,2</div>
<div class="product category1 category3">1,3</div>
<div class="product category2">2</div>
<div class="product category2 category3">2,3</div>
<div class="product category3">3</div>
<div class="product category3 category2">3,2</div>
<div class="product category1">1</div>
<div class="product category2">2</div>
<div class="product category3">3</div>
<div class="product category2">2</div>
<div class="product category1">1</div>
</div>
关于#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 ...
关于第 3 个,只需在输入字段中添加 checked
属性。
<label><input type="checkbox" value="*" checked id="all">Show all</label>