Как проверить checkbox и снять галочку с другого?

Question

[Юрий Денисов]

Добрый день! Имеется форма. В ней есть два checkboxа. Выбрать можно только либо 1 либо 2. Помогите сделать, чтобы при клике, допустим, по первому со второго снималась галочка, и наоборот, при клике по второму первый отмечался неотмеченным. Желательно на jQuery какой-то образец. Пробовал вот так:

$(function () {
    var checkTaxi = $('#taxi');
    var checkUcheb = $('#ucheb');
	
	if($(checkTaxi).is(':checked')==true) 
		{ 
			checkUcheb.iCheck('uncheck');
	}
	if($(checkUcheb).is(':checked')==true) 
		{ 
			checkTaxi.iCheck('uncheck');
	}
	else 
	{ 
			checkTaxi.iCheck('uncheck');
			checkUcheb.iCheck('uncheck');
	}

});

ничего не вышло. Кстати, подключен плагин iCheck.

Comments

[Юрий Денисов]

Внимание! Это две разные совершенно кнопки, их нельзя сувать в radio! Семантика не нужна. Это внутренняя вещица)))

[nSnayp]

Кстати об ошибках - для работы с DOM хорошо справляются фреймворки типа jQuery. Большие возможности, удобные селекторы.

И ты уже объявил var checkTaxi = $('#taxi');
Но потом в условии все равно пишешь if($(checkTaxi).is(':ch........
Да и надо писать универсальные функции, например объединить общие чекбоксы под один класс и работать с ним, дабы если добавить еще чекбокс зависимый от других придется писать еще кучу хрени на каждое изменение.

Answer 1

[nSnayp]

<input type='checkbox' id='taxi' onchange="checkk(this);"/>
<input type='checkbox' id='ucheb' onchange="checkk(this);"/> 

<script>
  function checkk(elem) {
    var id = elem.id;
	if(id=='taxi') { 
    $('#ucheb').removeAttr("checked");	
  }
  if(id=='ucheb') { 
    $('#taxi').removeAttr("checked");	
  }
  
}
</script>

Comments

[Юрий Денисов]

Может на какое-то событие повесить? Так не получается

[nSnayp]

Сейчас изменю

[Юрий Денисов]

@nSnayp jsfiddle.net/hv2kg не хочет((

[Юрий Денисов]

@nSnayp считает что функция check_func не определена оО

[nSnayp]

Возможно без скобок и проверь подключение jquery

[nSnayp]

onchange='check_func'>

[Юрий Денисов]

@nSnayp codepen.io/anon/pen/IBngH получается если надавить сперва правый а потом левый, то всё ок. если правый после этого попробовать то не щёлкается) надо отключать левый) как- нибудь можно поправить?

[rafuck]

1) с чекбоксом событие лучше вешить не на onChange, а на onClick
2) jquery тут явно лишний
3) есть html-элемент input[type=radio], специально для этого предназначенный

[Юрий Денисов]

@rafuck по первому не в курсе был, буду знать спасибо. по второму просто он уже подключен и активно используется, думал на нём проще будет, а по третьему в предыдущей ветке описал почему нет.

[nSnayp]

А. ну да не подумал, он же 2 раза себя выполняет... Тогда смотри в сторону свитча или просто разбей на 2 функции если других зависимых чекбоксов не планируется

[Юрий Денисов]

@nSnayp да, спасибо) немного подкорректировал и всё ок) и решение rafuck тоже пригодилось для понимания вобще))

Answer 2

[rafuck]

Это, конечно, ужасно. Но как-то так:

<input type="checkbox" name="taxi"  class="radio-a" />
	<input type="checkbox" name="ucheb" class="radio-a" />

	<script type="text/javascript"><!--//
		(function (){
			var radioA = document.getElementsByClassName('radio-a');

			for (var i=0; i<radioA.length; ++i){
				radioA[i].addEventListener('click', function(){
					if (this.checked){
						for (var j=0; j<radioA.length; ++j){
							radioA[j].checked = false;
						}
						this.checked = true;
					}
				}, false); 
			}
		})();
	//-->
	</script>

Comments

[Юрий Денисов]

как бы ни было ужасно, но работает не хуже)

Answer 3

[1001001 111]

для этого существует тип "radio"
jsfiddle.net/r6kaq

Comments

[Юрий Денисов]

прекрасно знаю про radio. в данной ситуации не подходит

[1001001 111]

@denissov ну как знаете =)

[begemot_nn]

@denissov если не трудно, просто для общего образования, напишите, почему не подходит?

[Юрий Денисов]

@begemot_nn разные переменные во первых, семантика не нужна во вторых, в третьих пользователям этой штуки проще ставить или снимать галочку а не перетыкивать радио, плюс радио больше места занимает и портит интерфейс

[Юрий Денисов]

как то вот поэтому)))

[Юрий Денисов]

плюс ко всему мне тогда переписывать половину того что сделано далее, а не очень хочется))

[Сергей Мельников]

@denissov "костыльный код" это конечно правильней, чем переписать часть кода так, как надо

[Юрий Денисов]

@mlnkv оО с чего бы ему быть костыльным? я уже объяснил для чего это, переписывать это одна из причин. радио в данной ситуации добавит как раз таки костылей и несколько строк кода со стороны сервера уже.

[Юрий Денисов]

@mlnkv плюс стилизовать потом радио под чекбокс это вот уже странно...

[Юрий Денисов]

плюс ещё! не факт что эти две кнопки всегда будут использоваться либо-либо. В будущем мб и обе.

Answer 4

[begemot_nn]

как вам уже написали выше - используйте radio, если хотите, чтобы они выглядели как чекбоксы, стилизуйте их.

Comments

[Роман Мисюра]

@begemot_nn я считаю это более правильным и логическим с точки зрения семантики.

[begemot_nn]

@MindMinimal и тут я вас полностью поддерживаю

Answer 5

[Александр Бабич]

<div id="id">
	<input type="checkbox">checkbox 1
	<input type="checkbox">checkbox 2
	<input type="checkbox">checkbox 3
</div>

<script>
$('#id input:checkbox').click(function(){
	if ($(this).is(':checked')) {
		 $('#id input:checkbox').not(this).prop('checked', false);
	}
});
</script>

Выбор только одного чекбокса с блока #id

Answer 6

[1001001 111]

JS =)

document.getElementById('checkTaxi').removeAttribute("checked")

Comments

[Юрий Денисов]

@IgorO2 vanila.js это хорошо, но его я совсем не знаю)))

[1001001 111]

@denissov по секрету: "я его тоже не знаю, тем не менее могу залезть в справочник и посмотреть" =)

[Юрий Денисов]

@IgorO2 получить элемент по ид и я могу)) а вот как потом бороться с плагином jquery iCheck на vanila.js я понятия не имею))