当使用jquery或javascript检查2个复选框时，如何过滤div列表？
我有一个4个div的列表，我使用2个复选框来筛选列表中是否存在特定的div。 过滤效果很好，直到我检查两个复选框。
正如您在下面的代码中看到的，如果您尝试同时选中“卡片”和“Paypal”复选框，则列表将消失。 相反，我需要显示所有4个div。 我怎样才能让它以这种方式工作？
这是代码：
$("#by-card").change(function() { $('.store-block .store-payment-options').each(function() { if ($(this).find('.card-available').length === 0) { $(this).parent(".store-block").toggleClass('hide-me'); } }); }); $("#by-paypal").change(function() { $('.store-block .store-payment-options').each(function() { if ($(this).find('.paypal-available').length === 0) { $(this).parent(".store-block").toggleClass('hide-me'); } }); }); .search-area { margin-bottom: 10px; } .storesList { margin-top: 20px; } #count { display: inline-block; } .store-block { width: 80%; margin-bottom: 10px; padding: 5px; background: #e5e5e5; position: relative; overflow: hidden; } .rating { position: absolute; right: 70px; top: 3px; } .minorder { position: absolute; right: 180px; top: 3px; } .paypal-available, .card-available { position: absolute; right: 10px; top: 5px; font-size: 11px; font-weight: bold; color: blue; } .right { float: right; } .left { float: left; } .hide-me { display: none; } .checkbox-lab { font-size: 12px; font-weight: bold; cursor: pointer; }
Apple Store 100 € Nokia Store 250 € Samsung Store 25 € Linux 50 €
我不擅长jQuery，但这就是我用旧的简单的普通Javascript解决这个问题的方法。 您的方法的关键更改是在两个复选框的父元素上侦听change事件（而不是在具有单独处理程序的每个复选框上），然后检查是否选中其中一个或两个 ，或者不选中复选框 ，并创建相应的复选框 DOM状态相应：
var checkboxArea = document.querySelector('.checkboxes-area') var storeBlocks = Array.from(document.querySelectorAll('.store-block')) var byCard = document.getElementById('by-card') var byPaypal = document.getElementById('by-paypal') var cardBlocks = storeBlocks.filter(function(block) { return block.querySelector('.card-available') }) var payPalBlocks = storeBlocks.filter(function(block) { return block.querySelector('.paypal-available') }) checkboxArea.addEventListener('change', function(e) { switch (true) { case byCard.checked && byPaypal.checked: storeBlocks.forEach(function(block) { block.classList.remove('hide-me') }) break case byCard.checked: cardBlocks.forEach(function(block) { block.classList.remove('hide-me') }) payPalBlocks.forEach(function(block) { block.classList.add('hide-me') }) break case byPaypal.checked: cardBlocks.forEach(function(block) { block.classList.add('hide-me') }) payPalBlocks.forEach(function(block) { block.classList.remove('hide-me') }) break default: payPalBlocks.concat(cardBlocks).forEach(function(block) { block.classList.remove('hide-me') }) } })
.search-area { margin-bottom: 10px; } .storesList { margin-top: 20px; } #count { display: inline-block; } .store-block { width: 80%; margin-bottom: 10px; padding: 5px; background: #e5e5e5; position: relative; overflow: hidden; } .rating { position: absolute; right: 70px; top: 3px; } .minorder { position: absolute; right: 180px; top: 3px; } .paypal-available, .card-available { position: absolute; right: 10px; top: 5px; font-size: 11px; font-weight: bold; color: blue; } .right { float: right; } .left { float: left; } .hide-me { display: none; } .checkbox-lab { font-size: 12px; font-weight: bold; cursor: pointer; }
Apple Store 100 € Nokia Store 250 € Samsung Store 25 € Linux 50 €
要获得该行为，您需要更改您拥有的代码：
- 您需要为
paypal和card的复选框设置一个changefunction - 然后，只要选中/取消选中任何复选框，就可以循环选中两个复选框以了解是否选中了其中任何复选框。 如果选中复选框，则显示带有类
store-block的元素，其中我还添加了一个类，该类与单击的checkbox的id值相同。 - 使用此类值可以很容易地确定属于特定复选框的div组。
- 在检查完所有复选框后，您还需要管理场景，因为我使用了变量
oneChecked。
$(".inputRadioGroup input[type='checkbox']").change(function() { var oneChecked = false; $(".inputRadioGroup input[type='checkbox']").each(function(){ var checked = this.checked; var checkedId = $(this).attr('id'); if(checked){ oneChecked = true; $('.'+checkedId).show(); } else { $('.'+checkedId).hide(); } }); if(!oneChecked){ $('.store-block').show(); } });
.search-area { margin-bottom: 10px; } .storesList { margin-top: 20px; } #count { display: inline-block; } .store-block { width: 80%; margin-bottom: 10px; padding: 5px; background: #e5e5e5; position: relative; overflow: hidden; } .rating { position: absolute; right: 70px; top: 3px; } .minorder { position: absolute; right: 180px; top: 3px; } .paypal-available, .card-available { position: absolute; right: 10px; top: 5px; font-size: 11px; font-weight: bold; color: blue; } .right { float: right; } .left { float: left; } .hide-me { display: none; } .checkbox-lab { font-size: 12px; font-weight: bold; cursor: pointer; }
Apple Store 100 € Nokia Store 250 € Samsung Store 25 € Linux 50 €