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

Ваш ответ

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

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