Hello World Example
HTML
<div class="filter-criteria">
<span>Manufacturer</span>
<label><input type="checkbox" name="manufacturer" value="apple">Apple</label>
</div>
<div class="filter-criteria">
<span>Screen Size</span>
<label><input type="checkbox" value="16" name="storage">16 GB</label>
<label><input type="checkbox" value="32" name="storage">32 GB</label>
</div>
<div class="filter-criteria">
<span>OS</span>
<label><input type="checkbox" value="android" name="os">Android</label>
<label><input type="checkbox" value="ios" name="os">iOS</label>
<label><input type="checkbox" value="windows" name="os">Windows</label>
</div>
<div class="filter-criteria">
<span>Camera</span>
<label><input type="checkbox" value="5" name="camera">5 Mpx</label>
<label><input type="checkbox" value="8" name="camera">8 Mpx</label>
<label><input type="checkbox" value="12" name="camera">12 Mpx</label>
<label><input type="checkbox" value="15" name="camera">15 Mpx</label>
</div>
<button>Clear filters</button>
CSS
body { display: flex;
flex-direction: column;
}
Babel + JSX
document.querySelector('button').addEventListener('click',function(){
document.querySelector('input[name=manufacturer][value=apple]').checked = true;
document.querySelector('input[name=storage][value=16]').checked = true;
})