Дешифратор коротких URL-адресов   •   Online-инструменты
1 422 просм
1 комм
Поделиться:

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

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

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

Как нам показывает практика, при использовании некоторых готовых 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, чтобы вам было за что зацепиться.

1
комментарий
Бука
1.08 в 09:50
Очень хороший метод. Мне, как новичку, помог единственный из всех найденных. Просто и понятно.
  • 1
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Текст комментария