[英]How to display the selected items of jquery checkbox list along with the label when only the user selects that particular checkbox
[英]I have a product list. when user selects the checkbox, page displays list of items in selected category only.remaining products will hide
<div id="productControls">
<form>
<div>
<span>Show:</span>
<input id="vitamins" type="checkbox" checked="checked" />
<label for="vitamins">Vitamins</label>
<input id="proteinB" type="checkbox" checked="checked" />
<label for="proteinB">ProteinBars</label>
</div>
</form>
</div>
<ul class="product-list">
<li class="product-item" data-prod_id="V-A1037">
<img class="product-image" src="images/products/vitamin-a.jpg" alt="Vitamin A - Product Photo">
<h2 class="product-name" data-type="vitamin">Vitamin A</h2>
</li>
<li class="product-item" data-prod_id="PB-8154">
<img class="product-image" src="images/products/proteinbar-chocolate.jpg" alt="Protein Bar Chocolate - Product Photo">
<h2 class="product-name" data-type="proteinbar">Chocolate Protein Bar</h2>
</li>
<li class="product-item" data-prod_id="V-MV7763">
<img class="product-image" src="images/products/vitamin-multi.jpg" alt="Vitamin Multivitamin - Product Photo">
<h2 class="product-name" data-type="vitamin">Multi-vitamin</h2>
</li>
<li class="product-item" data-prod_id="PB-1234">
<img class="product-image" src="images/products/proteinbar-peanutbutter.jpg" alt="Vitamin Protein Bar Peanut Butter - Product Photo">
<h2 class="product-name" data-type="proteinbar">Peanut Butter Protein Bar</h2>
</li>
<li class="product-item" data-prod_id="PB-1919">
<img class="product-image" src="images/products/proteinbar-lemon.jpg" alt="Protein Bar Lemon - Product Photo">
<h2 class="product-name" data-type="proteinbar">Lemon Protein Bar</h2>
</li>
</ul><!-- product-list -->
<script>
document.querySelector('#Vitamins').addEventListener('change',function (evt) {
updateView();
});
document.querySelector('#ProteinB').addEventListener('change',function (evt) {
updateView();
});
function updateView(){
//how to approach//
}
</script>
函数“ updateView”中包含什么。 解决此问题的方法有哪些? 如果用户选择了维生素,则复选框页面应显示所有维生素产品,而蛋白质产品则不应显示,反之亦然。 TIA。
测试工作:
document.querySelector('#vitamin').addEventListener('change', function(evt) { updateView(evt, this); }, false); document.querySelector('#proteinbar').addEventListener('change', function(evt) { updateView(evt, this); }, false); var productList = document.getElementsByClassName('product-list')[0]; var productName = productList.getElementsByClassName('product-name'); function updateView(e, self) { self.checked ? showOrHidden('block', self) : showOrHidden('none', self); } function showOrHidden(choice, thisArgu) { Array.from(productName).forEach(function(ele) { thisArgu.id === ele.getAttribute('data-type') ? ele.parentNode.style.display = choice : true; }); }
<div id="productControls"> <form> <div> <span>Show:</span> <input id="vitamin" type="checkbox" checked="checked" /> <label for="vitamin">Vitamins</label> <input id="proteinbar" type="checkbox" checked="checked" /> <label for="proteinbar">ProteinBars</label> </div> </form> </div> <ul class="product-list"> <li class="product-item" data-prod_id="V-A1037"> <img class="product-image" src="images/products/vitamin-a.jpg" alt="Vitamin A - Product Photo"> <h2 class="product-name" data-type="vitamin">Vitamin A</h2> </li> <li class="product-item" data-prod_id="PB-8154"> <img class="product-image" src="images/products/proteinbar-chocolate.jpg" alt="Protein Bar Chocolate - Product Photo"> <h2 class="product-name" data-type="proteinbar">Chocolate Protein Bar</h2> </li> <li class="product-item" data-prod_id="V-MV7763"> <img class="product-image" src="images/products/vitamin-multi.jpg" alt="Vitamin Multivitamin - Product Photo"> <h2 class="product-name" data-type="vitamin">Multi-vitamin</h2> </li> <li class="product-item" data-prod_id="PB-1234"> <img class="product-image" src="images/products/proteinbar-peanutbutter.jpg" alt="Vitamin Protein Bar Peanut Butter - Product Photo"> <h2 class="product-name" data-type="proteinbar">Peanut Butter Protein Bar</h2> </li> <li class="product-item" data-prod_id="PB-1919"> <img class="product-image" src="images/products/proteinbar-lemon.jpg" alt="Protein Bar Lemon - Product Photo"> <h2 class="product-name" data-type="proteinbar">Lemon Protein Bar</h2> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.