1

На странице есть много блоков одного размера, надо сделать так, чтобы при нажатии на блок, его название добавлялось в поле поиска input. Так как новичок, решил сделать из них чекбоксы (конечно, если можно сделать по другому, посоветуйте, пожалуйста, как именно). Нашел на просторах интернета некоторую информацию и сделал маленький пример

'use strict';
var items = document.querySelectorAll('[class="help"]');
var output = document.getElementById('output');
var links = Array.from(items).forEach(item => {
    if ($('input').is(':checked')) {
      output.innerHTML += `$ {
      item.name
    }
    </br>`;
    } else {
      output.innerHTML += ``;
    }
  }

);
<input type="checkbox" id="scales" class="help" name="scales" checked>
<label for="scales">Scales</label>
<input type="checkbox" id="horns" class="help" name="horns">
<label for="horns">Horns</label></br>
<div id='output'></div>

но работает он криво. Может кто занимался похожим и может помочь?

2
  • Что за гибрид из js и jq непонятный
    – Air
    27 апр 2019 в 17:01
  • не сильно еще разбираюсь в js
    – dduckker
    27 апр 2019 в 17:07

1 ответ 1

1

Вы про это?

[...document.querySelectorAll('.help')]
    .forEach(checkbox => checkbox.onchange = update)

update()

function update() {
  document.getElementById('output').value = 
    [...document.querySelectorAll('input:checked + label')]
        .map(label => label.textContent).join(' ');
}
<input type="checkbox" id="scales" class="help" checked>
<label for="scales">Scales</label>
<input type="checkbox" id="horns" class="help">
<label for="horns">Horns</label><br>
<input id='output'>

2
  • да, спасибо огромное!)
    – dduckker
    27 апр 2019 в 19:10
  • @dduckker отлично, пожалуйста 27 апр 2019 в 19:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.