Как сделать фильтр

[Gamer]

Здравствуйте!

Имеется скрипт такого вида:

<script type="text/javascript">
function philter(g) {
if (g.choose.checked) g.image.style.display = "none";
else g.image.style.display = "";
}
</script>

<input type="checkbox" name="choose" onClick="philter(this.form)"> 
<input type="submit" name="image" value="Элемент">

Оный прячет конкретный элемент при клике по галке.

Отсюда вопрос: как реализовать, дабы скрипт прятал несколько элементов при клике по галке?

[partiz]

1. Если хочешь сделать "умную" форму, то лучше с Ajax.

2. Если нужно спрятать несколько элементов, относящихся к одному блоку, то можно их занести в ДИВ и спрятать див:

<script language="JavaScript" type="text/javascript">
function onShowBlock(id) {
  var myobj = document.getElementById(id);
  if (myobj.style.display=='block') myobj.style.display='none'; else myobj.style.display='block';
}
</script>
Прячем/показываем блок №
<select size="1" onchange="if (this.value!='0') onShowBlock(this.value);">
<option value="0">#</option>
<option value="d1">1</option>
<option value="d2">2</option>
</select>
<hr>
<div id="d1" style="display: block; border: 1px dashed black;">
<input name="" /><textarea name=""></textarea><input type="radio" name="" />
</div>
<div id="d2" style="display: block; border: 1px dashed black;">
<input type="checkbox" name="" /><select name="" size="1"></select><input type="button" name="" value="" />
</div>

3. Можешь объединить свои элементы в группу по, например, одному ID... а затем искать их и прятать:

<script language="JavaScript" type="text/javascript">
function onShowBlock(id) {
  for (var i=0; i<document.all.length; i++) if (document.all.item(i).id==id) if (document.all.item(i).style.display=='block') document.all.item(i).style.display='none'; else document.all.item(i).style.display='block';
}
</script>
Прячем/показываем все элементы с ID =
<select size="1" onchange="if (this.value!='0') onShowBlock(this.value);">
<option value="0">#</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
</select>
<hr>
<div style="display: block; border: 1px dashed black;">
<input id="d1" name="" style="display: block;"/><textarea id="d1" name="" style="display: block;"></textarea><input id="d1" type="radio" name="" style="display: block;"/>
</div>
<div style="display: block; border: 1px dashed black;">
<input id="d2" type="checkbox" name="" style="display: block;"/><select id="d2" name="" size="1" style="display: block;"></select><input id="d2" type="button" name="" value="" style="display: block;"/>
</div>

Мой совет, это 1й или 2й варианты...

[Gamer]

Спасибо!

Но это не совсем то... Попробую четче обрисовать нужду:

Есть некая таблица, заполненная данными по одно тематике, но между собой различающимися. Для удобства обзовем их "красными", "зелеными" и "синими" данными. Информации выложена согласно определенному общему критерию, соответственно данные перемешаны между собой.

Необходим такой скрипт, чтобы при клике по галке (предпочтительно использовать именно её), допустим, "красный фильтр" все данные, кроме "красных" прятались. Аналогично с "зелеными" и "синими".

ЗЫ. В принципе, третий вариант мог бы подойти, если использовать вместо меню "чекбокс".

Edited January 10, 2009 by Gamer

[SelenIT]

Можешь объединить свои элементы в группу по, например, одному ID...

Не можешь! И по стандарту, и по здравому смыслу ID обязан быть уникальным. partiz, бегом учить матчасть, чтоб впредь не позориться перед людьми как "бюро вредных советов"

Gamer, меню или чекбокс, не принципиально -- функция вызывается по событию, которое может происходить на любом элементе. Вопрос лишь в том, как сгруппировать поля.

Как вариант, можно различать нужные элементы по классу контейнера, типа такого:

<script>
function filter(type) {
	var items = document.getElementById('myform').getElementsByTagName('label');
	for (var i=0; i<items.length; i++) {
		items[i].style.display = (items[i].className == type) ? '' : 'none';
	}
}
</script>
<select onchange="filter(this.value)">
	<option value="red">Red only</option>
	<option value="green">Green only</option>
	<option value="blue">Blue only</option>
</select>
<form id="myform">
	<label class="red">Красный инпут 1<input type="text"></label>
	<label class="blue">Синий инпут 1<input type="text"></label>
	<label class="red">Красный инпут 2<input type="text"></label>
	<label class="green">Зеленый инпут 1<input type="text"></label>
	<label class="blue">Синий инпут 2<input type="text"></label>
	<label class="green">Зеленый инпут 2<input type="text"></label>
	<label class="red">Красный инпут 3<input type="text"></label>
</form>

[partiz]

Не можешь! И по стандарту, и по здравому смыслу ID обязан быть уникальным. partiz, бегом учить матчасть, чтоб впредь не позориться перед людьми как "бюро вредных советов"

Совсем не обязательно делать разные id, и если бы разные id были обязательным условием, то, вероятнее всего, браузер бы это запрещал (и/или выдавал предупреждение/ошибку)

(хотя, используя здравый смысл, id на то и id, чтобы быть уникальным идентификатором... но я не могу полностью принять это утверждение (можно даже сказать правило) в отношении ХТМЛ (т.к. имея определенный опыт проектирования и работы с базами данных, с полной ответственностью заявляю, что в отношении БД id должен быть всегда уникальным), потому что иногда нужно так извернуться, чтобы как в поговорке про лису: "и рыбку съесть, и...")

Можно объединять элементы (к сожалению, не все элементы: например, формы нельзя называть одинаково) в группы, по одному тегу (tagName), одному имени (name), одному идентификатору (id). Все Браузеры нормально понимают и принимают эти группы, а так же позволяют с ними работать.

Edited January 11, 2009 by partiz

[SelenIT]

если бы разные id были обязательным условием, то, вероятнее всего, браузер бы это запрещал (и/или выдавал предупреждение/ошибку)

Браузеры пытаются помочь юзеру прочитать инфу, даже если она по какой-то причине (от криворукости автора до разрыва при передаче) пришла битой. Поэтому они пытаются исправлять ошибки. Каждый на свой лад. В разных режимах (зависит от доктайпа и типа контента) - в разной степени.

...в группы, по одному тегу (tagName), одному имени (name), одному идентификатору (id). Все Браузеры нормально понимают и принимают эти группы...

Для первых двух есть стандартные средства (getElementsByTagName и getElementsByName соотв-но), которые возвращают коллекцию, поэтому проблем нет. Но getElementById рассчитывает на уникальный id, для неуникальных его поведение не определено. В FF (по крайней мере, раньше) он возвращал первый попавшийся элемент. В IE - возвращает коллекцию, что может быть сюрпризом для скрипта (а еще IE путает id и name). А document.all из вашего примера - вообще древняя нестандартная вещь, которая в строгих режимах (напр., в Safari для полноценных XHTML-страниц) имеет законное право вообще не работать, поэтому полагаться на него нельзя.

А по поводу "можно, никто же не мешает"... Гулять по улицам с расстегнутой ширинкой тоже вроде как можно, прохожие, как правило, хорошо воспитаны и пальцем тыкать не будут. Но все равно, разве это приятно?

[partiz]

2 SelenIT... мы можем остаться при своих мнениях, и, безусловно, вы правы в отношении того, что тот вариант не идеальный и решать проблему им не фантан ... но вы, если разбираетесь с разницой "понимания" и "выполнения" кода браузерами, действительно могли бы помочь мне в решении мой проблемы http://forum.htmlbook.ru/index.php?showtopic=11960

Edited January 11, 2009 by partiz

[Gamer]

SelenIT, большое спасибо!

А не подскажите ли, как сделать, дабы при снятии галки (или новую галку, при клике по которой) таблица возвращалась к изначальном виду ("вперемешку", то бишь) ?

[partiz]

А не подскажите ли, как сделать, дабы при снятии галки (или новую галку, при клике по которой) таблица возвращалась к изначальном виду ("вперемешку", то бишь) ?

Есть свойство у checkbox... называется checked... если оно true, то галочка стоит, если false, то галочка снята.

<script language="JavaScript" type="text/javascript">
function filter(flag, type) {
  var items = document.getElementById('myform').getElementsByTagName('label');
  for (var i=0; i<items.length; i++) if (items[i].className == type) if (flag) items[i].style.display = 'none'; else items[i].style.display = '';
}
</script>
<input type="checkbox" name="" value="red" onclick="filter(this.checked, this.value)" /> Red only
<input type="checkbox" name="" value="green" onclick="filter(this.checked, this.value)" /> Green only
<input type="checkbox" name="" value="blue" onclick="filter(this.checked, this.value)" /> Blue only
<form id="myform">
	<label class="red">Красный инпут 1<input type="text"></label>
	<label class="blue">Синий инпут 1<input type="text"></label>
	<label class="red">Красный инпут 2<input type="text"></label>
	<label class="green">Зеленый инпут 1<input type="text"></label>
	<label class="blue">Синий инпут 2<input type="text"></label>
	<label class="green">Зеленый инпут 2<input type="text"></label>
	<label class="red">Красный инпут 3<input type="text"></label>
</form>

[Gamer]

Спасибо!