SO-53115315

by David Thomas

HTML

<div>
  <form>
    <div class="form-group">
      <label class="control-label"></label>
      <input type="text" value="" class="myCars">
    </div>
  </form>
  <form>
    <div class="form-group">
      <label class="control-label"></label>
      <input type="text" value="0011" class="myCars">
    </div>
  </form>
</div>

JavaScript

var elem = $('.myCars');

var car = ['car1', 'car2', "car3", "car4"];
var container = '<ul class="cars">';

for (i = 0; i < car.length; i++) {
  container += '<li>' +
    '<label class="container ' + car[i] + '">' +
    '<input type="checkbox">' +
    '<span class="checkmark"></span>' +
    '</label>' +
    '</li>';

}
container += '</ul>'
elem.closest('div').append(container);

$('.myCars').on('input', function() {
  let enteredValue = $(this).val().trim(),
    valueArray = enteredValue.split('').map(Number);
  $(this).closest('div').find('input[type=checkbox]').prop('checked', function(index) {
    return valueArray[index] === 1;
  });
})