Created
November 22, 2016 19:31
-
-
Save avtarnanrey/60cb38a6b0a2d692c8eb88d972f2bdf3 to your computer and use it in GitHub Desktop.
Working with Checkbox - Hide Show the content with data-type attribute from the checkbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Checboxes --> | |
<form id="productCategories"> | |
<input type="checkbox" name="product[]" value="vitamin" checked>Vitamin<br> | |
<input type="checkbox" name="product[]" value="mineralwater" checked>Mineral Water<br> | |
<input type="checkbox" name="product[]" value="proteinbar" checked>Proteinbar | |
</form> | |
<!-- List Items --> | |
<ul class="product-list"> | |
<li class="product-item" data-prod_id="V-BC2178"> | |
<img class="product-image" src="images/products/vitamin-bcomplex.jpg" alt="B Complex - Product Photo"> | |
<h2 class="product-name" data-type="vitamin">Vitamin-B Complex</h2> | |
</li> | |
<li class="product-item" data-prod_id="MW-8812"> | |
<img class="product-image" src="images/products/mineralwater-blueberry.jpg" alt="Blueberry Mineral Water - Product Photo"> | |
<h2 class="product-name" data-type="mineralwater">Blueberry Mineral Water</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> | |
<!-- Script --> | |
<script src="https://code.jquery.com/jquery-3.1.1.js"></script> | |
<script> | |
$(document).ready(function(){ | |
// Change background colors of the category name display | |
$("h2[class=product-name][data-type=mineralwater]").css("background-color", "green"); | |
// Show hide the prroduct listing by the categories | |
//if ticked then show otherwise hide | |
var productCat = $("form#productCategories input[type=checkbox]"); | |
$(productCat).on('change', function(){ | |
if($(this).is(":checked")) { | |
updateProductView($(this).val(), 'block'); | |
}else if($(this).is(":not(:checked)")){ | |
updateProductView($(this).val(), 'none'); | |
} | |
}); | |
function updateProductView(category, view){ | |
dataSelector = ""; | |
switch(category){ | |
case "mineralwater": | |
dataSelector = "h2[data-type='mineralwater']"; | |
break; | |
case "proteinbar": | |
dataSelector = "h2[data-type='proteinbar']"; | |
break; | |
case "vitamin": | |
dataSelector = "h2[data-type='vitamin']"; | |
break; | |
} | |
$('.product-item').has(dataSelector).css('display', view); | |
} | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment