问题描述
我有以下HTML元素:
I have these HTML elements:
<div>
<form>
<div class="form-group">
<label class="control-label"></label>
<input type="text" value="1100" class="myCars">
</div>
</form>
<form>
<div class="form-group">
<label class="control-label"></label>
<input type="text" value="0011" class="myCars">
</div>
</form>
</div>
以下是我的复选框:
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);
配置复选框后,我想通过所有输入并设置复选框,如果选中输入值为1
After configuring the checkboxes I want to go through all inputs and set checkboxes as checked where input values are 1
我试过这个:
$('.myCars').each(function() {
var arr = $(this).val()
var array = arr.split('')
// array values:
Array(4)["1", "1", "0", "0"]
Array(4)["0", "0", "1", "1"]
$('.myCars').prop('checked', function(index) {
return +array[index] === 1;
});
})
我如何才能使它工作?
推荐答案
您问题的一个可能答案是:
One possible answer to your question is:
// 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>
。
上述替代方案是以下,只使用普通的DOM API。请注意,在这种方法中,我使用了< template>
元素,而不是创建一个HTML字符串,并且还包含了整个< form>
one < form>
中的元素:
An alternative to the above is the following, using just the plain DOM API. Note that in this approach I've made use of a <template>
element, rather than creating a string of HTML and also wrapped the entirety of your <form>
elements in 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>
关于您的,另一个答案:
With regards to your question, in comments, to another answer:
这可以使用:
// 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:
- 。
- CSS:
- Attribute-selectors.
- 。
- 。
- 。
- 。
- 。
- 。
- 。
- 。
Array.prototype.forEach()
.Array.prototype.join()
.Array.prototype.map()
.HTMLTemplateElement
.HTMLTemplateElement.content
.Node.cloneNode()
.Number()
.String.prototype.split()
.String.prototype.trim()
.
- 。
- 。
- 。
- 。
- 。
- 。
- 。
- 。
- 。
closest()
.find()
.get()
.map()
.on()
.prop()
.trigger()
.val()
.
这篇关于设置基于用户输入选中的复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!