Профессиональная поддержка сайтов: разработка, дизайн, тексты, SEO и прочее от 500 Р   •   Реклама
3 998 просм
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
комментарий
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Гости  |  679

Очень хороший метод. Мне, как новичку, помог единственный из всех найденных. Просто и понятно.

1.08 в 09:50
  • 1
Подняться наверх
«Pandoge» - помощник веб-мастера