How to make flexbox boxes choosable? - html

Question

I have a flexbox row with boxes that looks like this.
How to make it as options? So when you click on one of them, you check checkbox and the chosen box is highlighted.
JSFiddle
<ul class="flex-container longhand">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.longhand {
flex-flow: wrap row;
}
.flex-item {
color: #C3D0D9;
border: 1px solid #C3D0D9;
width: 50px;
height: 50px;
font-size: 1.3em;
text-align: center;
padding: 10px;
}

Answer 1

Here is a solution using jQuery
I added data-id attributes which are not needed for this feature but can be useful if you need to capture that later or if the elements are generated from your db
$(document).ready(function() {
$('.flex-item').on('click', function() {
//console.log($(this).data('id'));
$(this).toggleClass('active');
/*if(!$('#check_'+$(this).data('id')+':checked')){
$('#check_'+$(this).data('id')).prop('checked', true);
}else {
$('#check_'+$(this).data('id')).prop('checked', false);
}*/
var checkBox = $('#check_' + $(this).data('id'));
checkBox.prop("checked", !checkBox.prop("checked"));
})
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.longhand {
flex-flow: wrap row;
}
.flex-item {
color: #C3D0D9;
border: 1px solid #C3D0D9;
width: 50px;
height: 50px;
font-size: 1.3em;
text-align: center;
padding: 10px;
}
.active {
border: 1px solid red;
}
#hidden_form {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="flex-container longhand">
<li class="flex-item" data-id="1">1</li>
<li class="flex-item" data-id="2">2</li>
<li class="flex-item" data-id="3">3</li>
<li class="flex-item" data-id="4">4</li>
<li class="flex-item" data-id="5">5</li>
</ul>
<form id="hidden_form">
<input type="checkbox" name="check[]" id="check_1" value="1" />
<input type="checkbox" name="check[]" id="check_2" value="2" />
<input type="checkbox" name="check[]" id="check_3" value="3" />
<input type="checkbox" name="check[]" id="check_4" value="4" />
<input type="checkbox" name="check[]" id="check_5" value="5" />
</form>