<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Filter checkboxes</h1>
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<p>
<input type="checkbox" class="filter" value="column1">column1
</p>
<p>
<input type="checkbox" class="filter" value="column2">column2
</p>
<p>
<input type="checkbox" class="filter" value="column3">column3
</p>
<p>
<input type="checkbox" class="filter" value="column4">column4
</p>
</body>
</html>
// Code goes here
$(document).ready(function(){
$('#searchColumn').keyup(function(){
$('.filter').each(function(){
if($(this).val() == $('#searchColumn').val()){
$('.filter').parent().addClass('hidden');
$(this).parent().removeClass('hidden');
}
});
});
});
/* Styles go here */
.hidden {
display: none;
}