1

Требуется связать чекбокс с мультиселектом. Изначально чекбокс активен, но при выборе из селекта, нужно, что бы чекбокс снимался, а если убрать всё из селекта, возвращался обратно. Какие есть варианты с использованием jQuery?

<select multiple>
                <option>Чебурашка</option>
                <option>Крокодил Гена</option>
                <option>Шапокляк</option>
                <option>Крыса Лариса</option>
        </select>
        <input type="checkbox">

2 ответа 2

3

$("select").change(function() {
  if ($("select option:selected").length > 0) {
    $("input[type='checkbox']").prop("checked", false);
  } else {
    $("input[type='checkbox']").prop("checked", true);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option>Чебурашка</option>
  <option>Крокодил Гена</option>
  <option>Шапокляк</option>
  <option>Крыса Лариса</option>
</select>
<input type="checkbox" checked>

1

$('select').on('click', function() {
  $(this).parent().find('input[type="checkbox"]').prop('checked', false);
});

$('input[type="checkbox"]').on('click', function() {
  if($(this).prop('checked')) {
    $(this).parent().find('select option:selected').prop("selected", false);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <select multiple>
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
  </select>
  <input type="checkbox" checked="checked">
</div>
<div class="wrapper">
  <select multiple>
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
  </select>
  <input type="checkbox" checked="checked">
</div>

5
  • Спасибо, работает, но есть проблемка, таких мультиселектов несколько, поэтому нужно определять объекты по id, подскажите? 28 янв 2020 в 10:40
  • всё зависит от реализации. Сгруппированы ли они в какие-то блоки?
    – Kirill
    28 янв 2020 в 11:35
  • Да, все селекты находятся в одной форме, так же есть стандартные классы bootstrap 28 янв 2020 в 11:38
  • "а если убрать всё из селекта, возвращался обратно." - этот пункт из вопроса не реализован же.
    – Speller
    28 янв 2020 в 12:27
  • @Speller так при выборе чекбокса связанный с ним селект очищается от выбранных значений. Это как при использовании групп radio - возможен только один вариант. Т.е. выбранным всегда будет либо чекбокс, либо селект.
    – Kirill
    28 янв 2020 в 12:37

Ваш ответ

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

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