Good afternoon, how on jquery to make it so that when you enter a number into <input type="text"> with your hands, the program would select the necessary answers in the checkbox (according to the entered number)?

Here is the code:

 <form> <input type="checkbox" class="chk" id="ch1" value="1">Кошка</br> <input type="checkbox" class="chk" id="ch2" value="2">Собака</br> <input type="checkbox" class="chk" id="ch3" value="4">Попугай</br> <input type="checkbox" class="chk" id="ch4" value="8">Рыбки</br> <input type="checkbox" class="chk" id="ch5" value="16">Рептилии</br> <input type="checkbox" class="chk3" id="ch6" name="ch6" value="0">ЖИВОТНЫЕ ОТСУТСТВУЮТ</br> <input type="text" id="result" value="19"></br> </form>

    1 answer 1

     // Кэшируем востребованные данные let form = $('form'), notFound = form.find('#ch6'), allCheckboxes = form.find('.chk, .chk3'); $('#result').on('input', function(e){ // Убираем все галочки allCheckboxes.prop('checked', false); // Пустую строку проверять не будем if(this.value.trim() === '') return; // Ищем чекбоксы с нужным значением let tmp = form.find(`[value='${this.value}']`); // Если такой (-ие) есть, отмечаем их if(tmp.length){ tmp.prop('checked', true); }else{ // Иначе выбираем тот, который показывает отсутствие животных notFound.prop('checked', true); } }); 
     input{outline: none;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="checkbox" class="chk" id="ch1" value="1">Кошка</br> <input type="checkbox" class="chk" id="ch2" value="2">Собака</br> <input type="checkbox" class="chk" id="ch3" value="4">Попугай</br> <input type="checkbox" class="chk" id="ch4" value="8">Рыбки</br> <input type="checkbox" class="chk" id="ch5" value="16">Рептилии</br> <input type="checkbox" class="chk3" id="ch6" name="ch6" value="0">ЖИВОТНЫЕ ОТСУТСТВУЮТ</br> <input type="text" autofocus id="result" placeholder="19"></br> </form>

    UPDATE :
    Select all items whose value is less than or equal to the entered value:

     // Кэшируем востребованные данные let form = $('form'), notFound = form.find('#ch6'), allCheckboxes = form.find('.chk, .chk3'); $('#result').on('input', function(e){ let value = parseInt(this.value, 10) || 0; // Убираем все галочки allCheckboxes.prop('checked', false); // Пустую строку проверять не будем if(this.value.trim() === '') return; // Ищем чекбоксы с нужным значением // Т. е. фильтруем все чекбоксы чтобы из значение было меньше или равно введённому числу let tmp = allCheckboxes.filter((_, e) => e.value != 0 && parseInt(e.value, 10) <= this.value); // Если такой (-ие) есть, отмечаем их if(tmp.length){ tmp.prop('checked', true); }else{ // Иначе выбираем тот, который показывает отсутствие животных notFound.prop('checked', true); } }); 
     input{outline: none;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="checkbox" class="chk" id="ch1" value="1">Кошка</br> <input type="checkbox" class="chk" id="ch2" value="2">Собака</br> <input type="checkbox" class="chk" id="ch3" value="4">Попугай</br> <input type="checkbox" class="chk" id="ch4" value="8">Рыбки</br> <input type="checkbox" class="chk" id="ch5" value="16">Рептилии</br> <input type="checkbox" class="chk3" id="ch6" name="ch6" value="0">ЖИВОТНЫЕ ОТСУТСТВУЮТ</br> <input type="text" autofocus id="result" placeholder="19"></br> </form>

    • too complex. - Alexey Shimansky
    • @ AlekseyShimansky I wanted to comment on more styles, but it broke :) - user207618
    • @avdemidov, thanks here is expressed in the pros and acceptance of the answer. - user207618
    • @Other, and how to make sure that by entering a number, for example, 25, it would give all the ticks in total for value - avdemidov
    • @avdemidov, what is it like? - user207618