Создать массив из значения input

205
12 апреля 2018, 11:18

Есть <input type=text>, в которое пользователь вписывает свое значение в формате от-до например 25-29 из введенного в input значения по нажатию кнопки нужно сформировать массив 25,26,27,28,29 и отобразить на экране в виде checkbox т.е так

<input type='checkbox' value='25'> и т.д. до конца массива. Помогите реализовать эту задачу

Answer 1

Тут алгоритм действий примерно следующий

  1. Получаем значение из поля инпут при нажатии на кнопку (получаем значение String)

  2. Парсим полученную строку:

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'));

  1. Ну и дальше добавляем чекбоксы в DOM, напиример так:

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

Answer 2

Создаете 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 сделать какую нибудь маску. Просто у вас не совсем очевидно что требуется

READ ALSO
Как кастомизировать jquery?

Как кастомизировать jquery?

Что если мне нужен не весь JQuery а только AJAX-запросы из него? Или какие-то другие функции на выборМожно ли эту библиотеку сначала кастомизировать...

175
Какие библиотеки c# лучше использовать для того чтобы автоматизировать действия в интернете

Какие библиотеки c# лучше использовать для того чтобы автоматизировать действия в интернете

Какие библиотеки c# лучше использовать для того чтобы автоматизировать какие то действия в интернете,чтобы не проделывать кучу однообразной...

200
разница Thread и Task

разница Thread и Task

Можно ли утверждать что Task автоматически создает пул потоков, а Thread нет ?

191
UserManager генерирует исключение ObjectDisposedException

UserManager генерирует исключение ObjectDisposedException

Создаю зависимость для класса PostHub(наследует Hub)

172