There is a <input type=text> in which the user enters his value in the format от-до for example 25-29 from the input value entered at the click of a button, you need to form an array 25,26,27,28,29 and display on the screen as a checkbox so

<input type='checkbox' value='25'> , etc. to the end of the array. Help to accomplish this task.

  • What do you already have? - Igor
  • Unfortunately I can not think of anything - Aziret Kadykeev
  • Didn't quite understand the question .... - Air
  • The user immediately enters a number into input , for example, 25-28 presses a button. After clicking the button, the script should form an array of numbers from 25-28 and display as <input type='checkbox' value='25'> , etc. to the end of the array. - Aziret Kadykeev

2 answers 2

Here the algorithm of actions is approximately the following.

  1. Get the value from the input field when you press the button

  2. Parsing the resulting 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'));

  1. Well and further we add checkboxes to DOM, napimer so:

 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>

To reduce input errors, I would recommend to divide the initial input into two (from and to), and give it type = number

    Create an input, button and div in which the checkboxes will be:

     <input id="input" type="text"> <button onclick={myFunc()}>click</button> <div id="div"></div>

    One of the options:

     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) } } } }

    Unfortunately, I don’t know what the conditions are for you, but if you wish, you can not do checks on isNaN, but simply prohibit input, for example, characters, or make some kind of mask on input. It's just not quite obvious what is required.