html - 如何使flexbox盒成为可​​能？

我有一个弹性框行，其中的框看起来像这样。



如何使其成为选项？因此，当您单击其中之一时，请选中复选框，然后选中的框将突出显示。

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;
}

最佳答案

这是使用jQuery的解决方案
我添加了此功能不需要的data-id属性，但是如果您以后需要捕获它或者元素是从数据库中生成的，则可能会很有用

$(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>