0

<select class="select" id="select">
  <option value="all" data-size="all" class="subSelect">Все размеры</option>
  <option value="big" data-size="big" class="subSelect">Большие</option>
  <option value="middle" data-size="middle" selected class="subSelect">Средние</option>
  <option value="small" data-size="small" class="subSelect">Маленькие</option>
</select>

<div class='boxes'>
  <label class="box">
    Маленький
    <input type="checkbox" data-size="small" class="checkbox" value="small">
  </label> <br>
  <label class="box">
    Средний
    <input type="checkbox" data-size="middle" class="checkbox" value="middle">
  </label><br>
  <label class="box">
    Большой
    <input type="checkbox" data-size="big" class="checkbox" value="big">
  </label><br>
</div>

1

1 ответ 1

1

Вариант 1. Используя jquery:

$("#select").on("change", function(){
  $("input[type='checkbox']").prop("checked", false);
  $("input[type='checkbox'][data-size='"+$(this).find("option:selected").data('size')+"']").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" id="select">
  <option value="all" data-size="all" class="subSelect">Все размеры</option>
  <option value="big" data-size="big" class="subSelect">Большие</option>
  <option value="middle" data-size="middle" selected class="subSelect">Средние</option>
  <option value="small" data-size="small" class="subSelect">Маленькие</option>
</select>

<div class='boxes'>
  <label class="box">
    Маленький
    <input type="checkbox" data-size="small" class="checkbox" value="small">
  </label> <br>
  <label class="box">
    Средний
    <input type="checkbox" data-size="middle" class="checkbox" value="middle">
  </label><br>
  <label class="box">
    Большой
    <input type="checkbox" data-size="big" class="checkbox" value="big">
  </label><br>
</div>

Вариант 2. На чистом javascript:

document.getElementById('select').addEventListener('change', function()
{
  let chekbox = document.querySelectorAll('input[type=checkbox]');
  for(let i = 0; i < chekbox.length; i++)
  {
    chekbox[i].checked = (chekbox[i].dataset.size == this.options[this.selectedIndex].dataset.size) ? true : false;
  }
});
<select class="select" id="select">
  <option value="all" data-size="all" class="subSelect">Все размеры</option>
  <option value="big" data-size="big" class="subSelect">Большие</option>
  <option value="middle" data-size="middle" selected class="subSelect">Средние</option>
  <option value="small" data-size="small" class="subSelect">Маленькие</option>
</select>

<div class='boxes'>
  <label class="box">
    Маленький
    <input type="checkbox" data-size="small" class="checkbox" value="small">
  </label> <br>
  <label class="box">
    Средний
    <input type="checkbox" data-size="middle" class="checkbox" value="middle">
  </label><br>
  <label class="box">
    Большой
    <input type="checkbox" data-size="big" class="checkbox" value="big">
  </label><br>
</div>

7
  • да именно то, но только нужен на чистом js
    – Mario
    15 мар 2018 в 16:13
  • 1
    @Mario упростили второй вариант. при выборе несколько одинаковых checkbox-ов не работает - непонятно, покажите пример кода
    – Alex
    15 мар 2018 в 17:05
  • 1
    Все класс)) спасибо
    – Mario
    15 мар 2018 в 17:07
  • 1
    @Mario обратите внимание, сейчас код еще раз обновлен - ранее была проверка по value, сейчас проверка идет по data-set выбранной option как и требуется в вопросе.
    – Alex
    15 мар 2018 в 17:13
  • 1
    Спасибо, это именно то
    – Mario
    15 мар 2018 в 17:18

Ваш ответ

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

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