Как сделать, чтобы при нажатии третьего чекбокса переходило по сформированной ссылке?

Подскажите, пожалуйста, как по приложенному коду сделать переход по сгенерированной ссылке при активации третьего чекбокса-кнопки, из условия что первый и второй тоже содержат свой кусок url, а третья является финальной?

То есть, получается: первый чекбокс (site.ru/) + второй чекбокс(category/) + третий чекбокс(item.html) = site.ru/category/item.html
И вот когда уже нажат третий чекбокс, должно переходить по полной ссылке site.ru/category/item.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
	<p>
		<label><input class="form-check-input" type="checkbox" value="/sloman-ekarn/">Сломан экран</label><br>
		<label><input class="form-check-input" type="checkbox" value="mi/">Mi</label><br>
	</p>
	<p>
    
    
    
		<button id="btn" class="no-vis btn btn-sm btn-outline-primary"><label><input class="form-check-input" type="checkbox" value="sloman-ekran-mi-8.html"></label>Xiaomi Mi 8</button>
	</p> 
  <p id="result" class="text-success"><a href=""></a></p>
</div>

$('#btn').click(function(){
	$('#result').html('');
	$('input:checkbox:checked').each(function(){
		$('#result').append($(this).val());
	});
});

body {
	font-size:14px;
	padding: 15px 20px;
}
a {
  baclground: red;
  width: 10px;
  height: 10px;
}
.no-vis  {
 position: relative;
  width: 100px;
  height: 20px;
}
.no-vis input {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100px;
  height: 20px;
  position:absolute;
}