Как связать селект с чекбоксом?

15 марта 2022, 23:30

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

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

Answer 1

$("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>

Answer 2

$('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>