Переключение радио кнопок по нажатию на обычные кнопки

// при нажатии на любой из button, значение data-rad которого начинается с radio 
$('button[data-rad^="radio"]').on('click', function() { 
  $('input[data-rad=' + $(this).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>

const btn = '.radio__label'; 
 
$(btn).on('click', function() { 
  $($(this).attr('data-rad')).prop('checked', true); 
}); 
 
$('.button-wrapper button').on('click', function(){ 
  const data = $(this).data('rad'); 
  $('input.radio__input').each(function(){ 
    if($(this).data('rad') === data){ 
      $(this).prop('checked', true); 
    } else { 
      $(this).prop('checked', false); 
    } 
  }); 
});

.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>