Есть <input type=text>
, в которое пользователь вписывает свое значение в формате от-до
например 25-29
из введенного в input
значения по нажатию кнопки нужно сформировать массив 25,26,27,28,29
и отобразить на экране в виде checkbox
т.е так
<input type='checkbox' value='25'>
и т.д. до конца массива. Помогите реализовать эту задачу
Тут алгоритм действий примерно следующий
Получаем значение из поля инпут при нажатии на кнопку (получаем значение String)
Парсим полученную строку:
const parser = (str) => {
const arr = [];
const parts = str.split('-');
// На всякий случай делаем проверку, чтобы from было меньше to
const from = Math.min(parseInt(parts[0]), parseInt(parts[1]));
const to = Math.max(parseInt(parts[0]), parseInt(parts[1]));
for(let i = from; i <= to; i++){
arr.push(i);
}
return arr;
}
// Проверяем:
console.log(parser('10-22'));
const arr = [11,12,13,14,15];
for(let i = 0; i < arr.length; i++){
$('#checkbox-wrapper').append(`<label><input type="checkbox" value="${arr[i]}"> ${arr[i]} </label>`);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='checkbox-wrapper'>
</div>
Для уменьшения ошибок ввода я бы порекомендовал начальный input разделить на два (от и до), и задал бы им type=number
Создаете input, button и div в котором будут чекбоксы:
<input id="input" type="text">
<button onclick={myFunc()}>click</button>
<div id="div"></div>
Один из вариантов:
function myFunc() {
// берем значение из input
var element = document.getElementById('input').value
// разбиваем его по знаку "-"
var arr = element.split('-')
// если длина массива === 2, то все ок
if (arr.length === 2) {
// переводим в число
var num1 = Number(arr[0])
var num2 = Number(arr[1])
// если это оба числа и 1 число меньше 2 то все ок
if (!isNaN(num1) && !isNaN(num2) && num1 <= num2) {
var divEl = document.getElementById('div')
// очищаем все что внутри div
while (divEl.firstChild) {
divEl.removeChild(divEl.firstChild);
}
for (var i = num1; i <= num2; i++) {
// создаем чекбокс
var checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.value = i
checkbox.id = 'checkbox' + i
// создаем label для чекбокса
var label = document.createElement('label')
label.htmlFor = 'checkbox' + i
label.innerHTML = 'checkbox' + i
// добавляем в наш div
divEl.appendChild(checkbox)
divEl.appendChild(label)
}
}
}
}
К сожалению не знаю что у вас за условия, но при желании можно не делать проверки на isNaN, а просто запрещать ввод например символов, или на input сделать какую нибудь маску. Просто у вас не совсем очевидно что требуется
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Что если мне нужен не весь JQuery а только AJAX-запросы из него? Или какие-то другие функции на выборМожно ли эту библиотеку сначала кастомизировать...
Какие библиотеки c# лучше использовать для того чтобы автоматизировать какие то действия в интернете,чтобы не проделывать кучу однообразной...
Можно ли утверждать что Task автоматически создает пул потоков, а Thread нет ?
Создаю зависимость для класса PostHub(наследует Hub)