您的问题的一个可能的答案是：
// select the .myCars elements, and bind the anonymous function
// of the on() method as the event-handler for the 'input'
// event:
$('.myCars').on('input', function() {
// retrieve the entered value, and then use String.prototype.trim()
// to remove leading/trailing white-space:
let enteredValue = $(this).val().trim(),
// convert that String into an Array, using
// String.prototype.split('') (as in your own posted code), then
// use Array.prototype.map() to iterate over every Array value
// with a call to the Number() function to convert the entered
// values to Numbers:
valueArray = enteredValue.split('').map(Number);
// navigate to the closest ancestor <div> element:
$(this).closest('div')
// find the <input type="checkbox"> elements:
.find('input[type=checkbox]')
// update the 'checked' property using the anonymous function,
// here we pass in the index of the current element:
.prop('checked', function(index) {
// we return the assessment of whether the array-value at
// the current index is exactly equal to 1 (if true this
// checks the check-box, if false it unchecks the box, or
// leaves it unchecked); this is why we used the call to
// Array.prototype.map(Number) earlier:
return valueArray[index] === 1;
});
// triggering the 'input' event so the checkboxes are updated
// on page load:
}).trigger('input');
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;
});
}).trigger('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<div class="form-group">
<label class="control-label"></label>
<input type="text" value="1010" class="myCars">
</div>
</form>
<form>
<div class="form-group">
<label class="control-label"></label>
<input type="text" value="0011" class="myCars">
</div>
</form>
</div>
JS 小提琴演示 https://jsfiddle.net/davidThomas/rz5e2Lvs/.
上面的替代方案如下，仅使用普通的 DOM API。请注意，在这种方法中我使用了<template>元素，而不是创建一个 HTML 字符串并包装整个<form>中的元素one <form>:
// using let, rather than var, as personal preference in this
// case; using document.querySelectorAll() to retrieve a
// non-live NodeList of the elements matching the supplied
// CSS selector:
let elems = document.querySelectorAll('.myCars'),
car = ['car1', 'car2', "car3", "car4"],
// using `document.createElement()` to create the <ul>:
container = document.createElement('ul');
// retrieving the content of the <template> element, accessed
// via its id (using a CSS selector), and the content property:
template = document.querySelector('#carCheckboxes').content,
// creating an InputEvent:
inputEvent = new Event('input'),
// defining the function to handle updates to the checkboxes,
// passing in the Event Object (here referred to as 'e'):
updateCheckmarks = (e) => {
// e.currentTarget is the element to which the event-listener
// is bound:
let source = e.currentTarget,
// here we retrieve the value of the current element,
// use String.prototype.trim() to remove the leading/
// trailing white-space, use String.prototype.split('')
// to convert the String to an Array of characters, and
// and finally a call to Array.prototype.map(Number)
// (as above) to convert the array-entries into numbers:
value = source.value.trim().split('').map(Number),
// here we find the check-boxes, navigating to the
// closest ancestor <div>:
checkmarks = source.closest('div')
// and finding the <input type="checkbox"> elements within:
.querySelectorAll('input[type=checkbox]');
// using Array.prototype.forEach() to iterate over that Array;
// check: the (user defined name for) the current <input> element,
// index: the (user defined name for) the index of the current
// <input> in the Array over which we're iterating:
checkmarks.forEach(function(check, index) {
// here we set the checked property to true/false,
// depending on the following assessment:
check.checked = value[index] === 1;
});
};
// iterating over the car Array, using Array.prototype.forEach():
car.forEach(function(el) {
// cloning the content template, including descendant elements
// using Node.cloneNode(true):
let model = template.cloneNode(true);
// appending that cloned node to the container:
container.appendChild(model);
})
// iterating over the elems Array:
elems.forEach(
// using an Arrow function; 'el' is the (user defined name
// for) the current element of the Array of elements:
(el) => {
// appending a cloned container Node to the closest
// ancestor <div> element:
el.closest('div').appendChild(container.cloneNode(true));
// binding the updateCheckmarks() function as the
// event-handler for the 'input' event:
el.addEventListener('input', updateCheckmarks);
// firing the inputEvent (created earlier) on the
// the current element, in order to trigger the
// function on page-load:
el.dispatchEvent(inputEvent);
});
let elems = document.querySelectorAll('.myCars'),
car = ['car1', 'car2', "car3", "car4"],
container = document.createElement('ul');
template = document.querySelector('#carCheckboxes').content,
inputEvent = new Event('input'),
updateCheckmarks = (e) => {
let source = e.currentTarget,
value = source.value.trim().split('').map(Number),
checkmarks = source.closest('div').querySelectorAll('input[type=checkbox]');
checkmarks.forEach(function(check, index) {
check.checked = value[index] === 1;
});
};
car.forEach(function(el) {
let model = template.cloneNode(true);
container.appendChild(model);
})
elems.forEach(
(el) => {
el.closest('div').appendChild(container.cloneNode(true));
el.addEventListener('input', updateCheckmarks);
el.dispatchEvent(inputEvent);
});
<template id="carCheckboxes">
<li>
<label>
<input type="checkbox"><span class="checkmark"></span>
</label>
</li>
</template>
<div>
<form>
<div class="form-group">
<label class="control-label"></label>
<input type="text" value="1010" class="myCars">
</div>
<div class="form-group">
<label class="control-label"></label>
<input type="text" value="0011" class="myCars">
</div>
</form>
</div>
关于你的问题，评论里 https://stackoverflow.com/questions/53115315/set-checkboxes-checked-based-on-user-input/53115730#comment93127434_53115771，到另一个答案：
[我]可以[如何]使用onClick更改每个复选框的值？ [因为]当[I]这样做时，所有输入中的复选框的值都会发生变化。
这可以使用：
// while this code - in my example - runs after the <input>
// elements are created, and appended to the DOM, we're
// binding the event-handler, using the on() method, to
// already-existing elements; so here we select the <form>
// element, and bind the anonymous function of the on()
// method as the 'change' event-handler:
$('form').on('change', function(e) {
// caching variables:
let form = $(this),
valuesInput = form.find('.myCars'),
// finding the <input type="checkbox"> elements within
// the <form> element:
checkboxValues = form.find('input[type=checkbox]')
// using map() - the jQuery method - to iterate over
// the collection to form an Array-like Object:
.map(function(index, el) {
// here we return 1 (if the current element is checked),
// or 0 if it is not checked:
return el.checked ? 1 : 0;
// using the get() method to convert the Array-like Object
// into an Array:
}).get()
// using join() to convert that array into a String, passing
// in an empty string ('') to act as the joining characters
// (if no argument is passed the default is a comma):
.join('');
// updating the value of the <input class="myCars"> element:
valuesInput.val(checkboxValues);
// firing the 'change' event on page-load so that the value of
// the text-input reflects the checked/unchecked state of the
// checkboxes:
}).trigger('change');
let elem = $('.myCars'),
car = ['car1', 'car2', "car3", "car4"],
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;
});
}).trigger('input');
$('form').on('change', function(e) {
let form = $(this),
valuesInput = form.find('.myCars'),
checkboxValues = form.find('input[type=checkbox]').map(function(index, el) {
return el.checked ? 1 : 0;
}).get().join();
valuesInput.val(checkboxValues);
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
参考：
- CSS:
-
属性选择器 https://www.w3.org/TR/2018/PR-selectors-3-20180911/#attribute-selectors.
- JavaScript:
-
Array.prototype.forEach() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach.
-
Array.prototype.join() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join.
-
Array.prototype.map() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map.
-
HTMLTemplateElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement.
-
HTMLTemplateElement.content https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content.
-
Node.cloneNode() https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode.
-
Number() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number.
-
String.prototype.split() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split.
-
String.prototype.trim() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim.
- HTML:
-
<template> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.
- jQuery:
-
closest() http://api.jquery.com/closest/.
-
find() http://api.jquery.com/find/.
-
get() http://api.jquery.com/get/.
-
map() http://api.jquery.com/map/.
-
on() http://api.jquery.com/on/.
-
prop() http://api.jquery.com/prop/.
-
trigger() http://api.jquery.com/trigger/.
-
val() http://api.jquery.com/map/.
