<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>
-
Возможный дубликат вопроса: Как связать два radiobutton с двумя select?– Air15 мар 2018 в 15:32
Добавить комментарий
|
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>
-
-
1@Mario упростили второй вариант. при выборе несколько одинаковых checkbox-ов не работает - непонятно, покажите пример кода– Alex15 мар 2018 в 17:05
-
1
-
1@Mario обратите внимание, сейчас код еще раз обновлен - ранее была проверка по value, сейчас проверка идет по data-set выбранной option как и требуется в вопросе.– Alex15 мар 2018 в 17:13
-
1