столкнулся с проблемой. Как сделать, чтобы при нажатии на обычные кнопки можно было переключать радио кнопки. Каждая из обычных кнопок привязана к радио через data-атрибут.
const btn = '.radio__label';
$(btn).on('click', function() {
$($(this).attr('data-rad')).prop('checked', true);
});
.radio-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 400px;
}
.button-wrapper {
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-wrapper">
<label class="radio-group">
<input type="radio" name="group-1" class="radio__input" data-rad="radio1">
<span class="radio__label">RAD1</span>
</label>
<label class="radio-group">
<input type="radio" name="group-1" class="radio__input" data-rad="radio2">
<span class="radio__label">RAD2</span>
</label>
<label class="radio-group">
<input type="radio" name="group-1" class="radio__input" data-rad="radio3">
<span class="radio__label">RAD3</span>
</label>
<label class="radio-group">
<input type="radio" name="group-1" class="radio__input" data-rad="radio4">
<span class="radio__label">RAD4</span>
</label>
</div>
<div class="button-wrapper">
<button type="button" data-rad="radio1">
RAD1
</button>
<button type="button" data-rad="radio2">
RAD2
</button>
<button type="button" data-rad="radio3">
RAD3
</button>
<button type="button" data-rad="radio4">
RAD4
</button>
</div>