Выбор только одного checkbox из группы на jQuery

Мы знаем, что в HTML input с типом checkbox – это флажок, который позволяет выбрать несколько вариантов ответов, в отличие от типа radio.

Как нам показывает практика, при использовании некоторых готовых CMS мы не можем переделать checkbox в radio, но при этом нам нужно разрешить выбор только одного пункта. Как нам быть в таком случае?

На помощь к нам приходит jQuery с обработчиком «click» и методом «removeAttr» для изменения состояния элемента.

Реализация:

<div class="group">
	<input type="checkbox" name="test" value="1"> - 1<br>
	<input type="checkbox" name="test" value="2"> - 2<br>
	<input type="checkbox" name="test" value="3"> - 3<br>
	<input type="checkbox" name="test" value="4"> - 4
</div>

<script>

	$(".group input").on("click", function() {

		$(".group input").removeAttr("checked"); // Снимаем чекбокс со всей группы
		$(this).prop("checked", true); // Оставляем выбранный чекбокс

	});
	
</script>

При попытке выбрать несколько чекбоксов в таком случае выберется только один.

На что здесь стоить обратить внимание? На то, чтобы вся группа чекбоксов была объединена одним name, class, id или общим div, чтобы вам было за что зацепиться.