0

подскажите как можно осуществить поиск по checkbox с сохранением значения checked (если это значение есть)

<div class="filter" id="filter">
    <label class="field">
        <input
           placeholder="поиск"
           type="text"
           id="search"
           class="input"
        >
    <label class="checkbox">
          checkbox-1
          <input type="checkbox" value="checkbox-1">
    </label>
    <label class="checkbox">
          checkbox-2
          <input type="checkbox" value="checkbox-2">
    </label>
    <label class="checkbox">
          checkbox-3
          <input type="checkbox" value="checkbox-3">
    </label>
    <label class="checkbox">
          checkbox-4
          <input type="checkbox" value="checkbox-4">
    </label>
    <label class="checkbox">
          checkbox-5
          <input type="checkbox" value="checkbox-5>
    </label>
    <label class="checkbox">
          checkbox-6
          <input type="checkbox" value="checkbox-6">
    </label>
    <label class="checkbox">
          checkbox-7
          <input type="checkbox" value="checkbox-7">
    </label>
    <label class="checkbox">
          checkbox-8
          <input type="checkbox" value="checkbox-8">
    </label>
</div>

script поиска

const input = document.getElementById('search')
const filter = document.getElementById('filter')
const checkboxes = filter.querySelectorAll('input[type="checkbox"]')
input.addEventListener('input', function () {
            const search = [...checkboxes].filter(elem => 
                           elem.value.includes(this.value))
            filter.innerHTML = search.map(checkbox =>  `
            <label class="checkbox" >
            <input type="checkbox" value="${checkbox.value}">
            <span class="checkbox__checkmark" ></span>
            <span class="checkbox__text" >${checkbox.value}</span>
            </label>`).join('')
        })

Скрипт таким образом работает верно, но нет возможности сохранить значение checkbox, т.е. чтоб было видно checbok выбран или нет

2
  • Что бы понять, выбран checkbox или нет, вам необходимо проверять свойство checked (удивительно, в вопросе вы сами говорите, что вам надо проверять это свойство, а в коде вы этого не делаете...)
    – SwaD
    Commented 24 окт. 2022 в 15:02
  • @SwaD Можете пожалуйста расписать чтоб это работало?
    – VTsM
    Commented 24 окт. 2022 в 15:09

1 ответ 1

0

Вот таким образом можно получить значение checkbox

const input = document.getElementById('search');
const res = document.getElementById('res');

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
input.addEventListener('input', function (e) {

    const search = [...checkboxes].filter(elem => elem.value.includes(this.value));
    res.innerHTML = search.map(checkbox =>  `
        <label class="checkbox" >
        <input type="checkbox" value="${checkbox.value}" ${checkbox.checked ? 'checked' : ''}>
        <span class="checkbox__checkmark" ></span>
        <span class="checkbox__text" >${checkbox.value}</span>
        </label>`).join('')
    })
<div class="filter" id="filter">
    <label class="field">
        <input
           placeholder="поиск"
           type="text"
           id="search"
           class="input"
               
        >
    <label class="checkbox">
          checkbox-1
          <input type="checkbox" value="checkbox-1"/>
    </label>
    <label class="checkbox">
          checkbox-2
          <input type="checkbox" value="checkbox-2"/>
    </label>
    <label class="checkbox">
          checkbox-3
          <input type="checkbox" value="checkbox-3"/>
    </label>
    <label class="checkbox">
          checkbox-4
          <input type="checkbox" value="checkbox-4"/>
    </label>
    <label class="checkbox">
          checkbox-5
          <input type="checkbox" value="checkbox-5"/>
    </label>
    <label class="checkbox">
          checkbox-6
          <input type="checkbox" value="checkbox-6"/>
    </label>
    <label class="checkbox">
          checkbox-7
          <input type="checkbox" value="checkbox-7"/>
    </label>
    <label class="checkbox">
          checkbox-8
          <input type="checkbox" value="checkbox-8"/>
    </label>
<br /><br />

      <div id='res'>                                       

      </div>
</div>

6
  • Спасибо вам, наглядно видно. Но как сделать чтоб этот список заменял уже существующий список чекбоксов
    – VTsM
    Commented 24 окт. 2022 в 15:48
  • И еще например, если я хочу найти checkbox-1 в поиске нахожу его, выбираю, а затем очищаю поле поиска, то все равно остается checkbox невыбранный
    – VTsM
    Commented 24 окт. 2022 в 15:52
  • Вы же понимаете, что если список заменить, то у вас пропадут все ранее установленные листнеры и обратно вы не вернетесь к исходному состоянию?
    – SwaD
    Commented 24 окт. 2022 в 16:15
  • Понимаю, но в этом и состоит поиск, чтоб найти checkbox, выбрать его, удалить из поиска, написать в поиск снова и найти другой checkbox, как можно такое реализовать?
    – VTsM
    Commented 24 окт. 2022 в 16:22
  • Ну так это уже совершенно другая история, которая не соответствует вопросу. Просили помочь выбирать чекбоксы с чеком - я показал как. Как вы это будете применять у себя на страничке это уже ваше дело, т.к. я не задавался вопросом, зачем вам такое вообще )) Если вы хотите реализовать по ним прям нормальный полноценный поиск, то вам не надо их переписывать, а надо скрывать. Скрыть можно допустим установкой класса. Так же как вы сделали, бежите по массиву и нужные элементы маркируете. Попробуйте это сделать сами, не получится, приходите с новым вопросом и вашим кодом, поможем, чем сможем :)
    – SwaD
    Commented 24 окт. 2022 в 16:30

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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