Выбор первого чекбокса?

Question

[Максим Медведев]

Есть такой код:

&lt;_tr class=&quot;table_rows&quot;&gt;<br/>
<br/>
&lt;_td&gt;&lt;_input name=&quot;del[{$item-&gt;id}]&quot; type=&quot;checkbox&quot; id=&quot;del[{$item-&gt;id}]&quot; value=&quot;1&quot;&gt;

<_td>

<_input name=«test» type=«text» id=«test» value=«123» size=«60»>

<_/td>



<_td>

текст

<_/td>

<_/ tr>





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

$('.table_rows').click(function() {<br/>
 $(this).toggleClass(&quot;selects&quot;);<br/>
<br/>
if( $(this).find(&quot;input&quot;).is(&quot;:checked&quot;))<br/>
 {<br/>
 $(this).find(&quot;input&quot;).removeAttr(&quot;checked&quot;);<br/>
 } else {<br/>
 $(this).find(&quot;input&quot;).attr(&quot;checked&quot;,&quot;checked&quot;);<br/>
 }<br/>
 <br/>
 }); <br/>

Comments

[Дмитрий Сергеев]

вам нужно что бы при клике на строку выделялся чекбокс этой же строки (tr)?

[Максим Медведев]

Да, нужен чекбокс только этой строки.

Answer 1

[mishunika]

Может ты забыл поставить?

Чтото я не до-понял твой вопрос.

Comments

[Максим Медведев]

Я задал вопрос — «Как сделать ограничение?»
То есть при клике по строке должен выделяться первый в этой строке чекбокс. При клике на ссылки или поля для ввода в этой строке чекбокс выделяться не должен.

Answer 2

[mishunika]

<_input type=«checkbox» id=«ваш_айди» value=«1»/>

ваш текст

Comments

[mishunika]

<_label for=«ваш_айди»>ваш текст<_/label>

[Максим Медведев]

Не подходит вариант. На месте «ваш текст» может быть ссылка или поле для ввода текста, соответственно при клике на них первый чекбокс будет выбран. Мне нужна вся строка, вот в чём дело.

Answer 3

[mishunika]

простите за эту лабурду. просто забываю что здесь работают html теги. И так, конечный ответ:

<_input type=«checkbox» id=«ваш_айди» value=«1»/>
<_label for=«ваш_айди»>ваш текст для вашего чекбокса<_/label>

Comments

[Максим Медведев]

Спасибо за вариант, но не подходит, выше ответил.

Answer 4

[lashtal]

Не понял вопрос, но что-то из этого подойдет? )
jsfiddle.net/4k6PA/7/

Comments

[Максим Медведев]

Смотрите, получается в этом примере две строки. При нажатии на check row выделяются все чекбоксы в строке. Мне нужен только первый в данном примере row1 check1 или row2 check1. При этом, если в строке будет поле для ввода текста input при клике на нём чекбокс не должен выделятся.

[lashtal]

jsfiddle.net/4k6PA/8/
ок, добавил :first к селектору. оно?

[Максим Медведев]

Ага, теперь отмечается только первый. У меня код сейчас такой:

$('.table-rows').click(function(){
		if ( $(this).find('input[type=checkbox]:first').is(':checked') ) {
			$(this).closest('tr').find('input[type=checkbox]:first').removeAttr("checked");
		} else {
			$(this).closest('tr').find('input[type=checkbox]:first').attr('checked','checked');
		}
});

то есть добавлена возможность снять чекбокс. Но, в вашем примере, на место row1 check1 поставьте какой то текст и поле для ввода текста. label нужно убрать. Теперь смотрите, мы нажимаем на текст, чекбокс отмечен, всё хорошо. Теперьнажимаем на инпут, чекбокс опять отмечен, как исправить?

Answer 5

[Serator]

События в jquery активируются во время «всплытия» (кроме события focus и, возможно, иных для определенных браузеров, ибо IE не поддерживает «захват» в своих версия <9).
Исходя из этого вы можете активировать чекбокс во время нажатия на строку и второй раз, если событие высплывет до ссылки / текстового поля.
Ну и делигированием имеет смысл такое событие на всю таблицу навесить. И в следующий раз оформляйте нормально свой вопрос, а так же js подучите, ибо сложного/интересного в сим ничего нет :).

Comments

[Максим Медведев]

Если бы я хорошо знал js, вопрос бы и не задавал. Вы правильно написали про активацию чекбокса, проблема в том, что мой вариант работает, но мне не удаётся отфильтровать лишние элементы, поэтому и спрашиваю помощи. Сказать иди учи мат часть легко, но по вашему комментарию можно сделать вывод, что и вы ответа тоже не знаете?

[Serator]

Знание ответа в вашем случае подразумевает написание готового решения? :) Я jquery пользовался совсем недолго в прошлом году и у меня нет желания лезть в доки.
На простом js (к примеру для Firefox'а и без использования «захвата», хоть Firefox его и поддерживает, да и вообще все w3c-совместимые браузеры) это выглядело бы как проверка event.target'а (элемента, на котором возникло событие) при делигировании события «click» на таблице на имя тега («tagName», если не ошибаюсь). Если бы это оказался тег «tr», то я бы изменил статут чекбокса и поставил флаг, что «tr» найден и нужно дальше продолжать ловить ссылку, аль одностройное поле для ввода текста (ибо они выше находятся, а ловим мы на этапе всплытия). Ну и далее по этому же алгоритму. Все довольно просто. Переведите это на jquery и будет вам счастье.

[Максим Медведев]

Знание ответа подразумевает подсказать, как убрать лишние элементы. Готовый код уже есть, даже три варианта, они выше. Я не прошу написать готовое, мне нужна помощь в удалении лишних элементов из набора.

[Serator]

Ну выше я уже подсказал как.

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Table example page</title>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('table')
					.click(function(event){
						console.log(event.target);
						if(
							event.target.type!==null&&
							event.target.type!=='text'&&// Если нажали не на input type='text'
							event.target.type!=='checkbox'&&// Если нажали не на input type='checkbox'
							event.target.tagName!=='a'// Если нажали не на ссылку
						){
							var
								$tr=$(event.target).closest('tr'),
								$checkbox=$tr.find('input[type="checkbox"]')[0];
							if($checkbox.checked===true){// Если флаг на первом чекбоксе установлен в позицию "true"
								$checkbox.checked=false;
								$tr.removeClass('selects');
							}
							else{
								$checkbox.checked=true;
								$tr.addClass('selects');
							}
						}
					});
			});
		</script>
	</head>
	<body>
		<table>
			<tr class="table_rows">
				<td>
					<input name="del[{$item->id}]" type="checkbox" id="del[{$item->id}]" value="1">
					<input name="test" type="text" id="test" value="123" size="60">
				</td>
				<td>
					текст
				</td>
			</tr>
			<tr class="table_rows">
				<td>
					<input name="del[{$item->id}]" type="checkbox" id="del[{$item->id}]" value="1">
					<input name="test" type="text" id="test" value="123" size="60">
				</td>
				<td>
					текст
				</td>
			</tr>
		</table>
	</body>
</html>

Я заменил toggleClass(«selects»), так что проверьте правильно ли он себя ведет. + я jquery уже почти с год не пользовался и не использовал ее побрекушки с делегированием из последней версии, ибо нет желания ман читать, так что сами уже правьте в нужном направлении.

Ну и ничего хорошего в этом нет, ибо в ответах должны указывать, а не довать готовые решения…