Skip to content

Instantly share code, notes, and snippets.

@DevShahidul

DevShahidul/Get element with checkbox checked.html

Created August 28, 2018 12:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DevShahidul/edbfffec7f13b6a4f39387abfb6553c7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DevShahidul/edbfffec7f13b6a4f39387abfb6553c7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Get element with checkbox checked.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="scripts/jquery-1.12.4.min.js"></script>
</head>
<body>
<!-- Check box markup -->
<form action="#" method="post">
<div class="check-item">
<input type="checkbox" id="diamondsJewellery" checked>
<label for="diamondsJewellery">Diamonds Jewellery</label>
</div>
<div class="check-item">
<input type="checkbox" id="start-2">
<label for="start-2">Tanzanite Jewellery</label>
</div>
<div class="check-item">
<input type="checkbox" id="start-3" checked>
<label for="start-3">Majestic Collection</label>
</div>
<div class="check-item">
<input type="checkbox" id="start-4" checked>
<label for="start-4">BYL Collection</label>
</div>
<div class="check-item">
<input type="checkbox" id="uniquePieces">
<label for="uniquePieces">Unique Pieces</label>
</div>
<div class="check-item">
<input type="checkbox" id="bracelets">
<label for="bracelets">Bracelets</label>
</div>
<div class="check-item">
<input type="checkbox" id="start-8">
<label for="start-8">Gemstone Jewellery Collection</label>
</div>
<div class="submit-wrap">
<input type="submit" value="Update results" class="submit-white">
</div>
</form>
<!-- Html markup for displayed element -->
<div class="content-item-wrap" id="content-item-wrap">
<a href="single-product.html" class="content-item" data-type="uniquePieces">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item1.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="bracelets">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item2.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="bracelets">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item3.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="diamondsJewellery">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item2.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="diamondsJewellery">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item3.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="diamondsJewellery">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item1.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="bracelets">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item1.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="uniquePieces">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item2.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
<a href="single-product.html" class="content-item" data-type="uniquePieces">
<div class="top-info">
<span>Diamond Emerald Ring</span>
</div>
<figure>
<img src="images/jewellery-item3.png" alt="">
</figure>
<div class="bottom-info">
<em>HS04</em>
<em>$800.00</em>
</div>
</a>
</div>
<!-- Scripting function -->
<script>
$("#content-item-wrap a").each(function(){
var dataGroup = $(this).attr('data-type');
$(this).addClass(dataGroup);
})
$('.check-item input[type="checkbox"]').each(function(){
var checkedElement = $(this).attr('id')
if(this.checked){
$('.'+ checkedElement).show();
}
$(this).on('change', function(){
if(this.checked){
$('.'+ checkedElement).fadeIn();
}else{
$('.'+ checkedElement).fadeOut();
}
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment