При установке галки на ckeckbox переход по ссылке.

[maasja]

Здравствуйте. Появилась необходимость чтобы при установке галки на input type="checkbox" произошел переход на указанную страницу (так как будто нажали на ссылку), главное условие - без использования JavaScript. Я уже думал может как то обвернуть input в ссылку...

Может у Вас есть какие нибудь или идеи, или уже готовый рецепт?

Буду признательный любой помощи. Спасибо.

[Nagibaka]

Ну первое быдло-решение, которое приходит в голову - это:

<a href="#"><input type="checkbox" name="option" value="a5">text</a></p>

еще можно в стилях ссылки убрать подчеркивание(text-decoration:none)

[maasja]

Nagibaka, с сожалению то что вы посоветовали не работает (даже если добавить пропущенный открывающей тег <p>). В общем я игрался, игрался, и понял - все что возможно сделать, это просто над input сверху нацепить прозрачную ссылку. Тогда переход по ссылке естественно будет осуществляться, но галка ставится не будет. Я ставил label и внутрь ссылки, и ссылку оборачивал в <label>, какие с ними вариации только не пробовал, в итоге работает либо ссылка (<a href="...">), либо <label for="input_id"> .

Может у кого-то есть еще какие-то идеи?

Спс.

[Justnewone]

Думаю, что не выйдет ничего. Вы же понимаете, что это варварство.

[Saturn]

if (('$block_id checkbox:checked')) {
location.href = "site.ru";
}
 //как-то так....

А без js не сделаешь.

Edited December 15, 2011 by Saturn

[maasja]

Justnewone, что варварского в том чтобы при установке галки, просто произошел переход по ссылке (ну и галка естественно поставилась) ?

Saturn, та с js я и сам могу...

В общем максимально то что было возможно сделать - сделал. Вот, может кому пригодится:

<label for="input0">
<input type="checkbox" id="input0" style="position:relative;margin-left:-20px;left:20px;z-index:1;">
<a href="#" style="position:relative;padding-left:20px;z-index:2;">Ссылка</a>
</label>

- тут можно на пример глянуть http://jsfiddle.net/vL5dA/2/

Как не странно, но работает это так как было задумано - только в Internet Explorer (9 версии, другие не проверял), а во всех остальных будет просто переход по ссылке (а потом уже на сервере можно ставить галку..).

Теперь объясню почему именно такая иерархия DOM, и почему это полноценно работает только в IE.

Проблема в том, что во всех браузерах, кроме как IE, при нажатии например на <input> который вложенный в <a>

<a href="#"><input></a>

, браузер "кликает" только на вложенный элемент (в данном примере input), и в верх клик уже не предает. Правильнее даже сказать - что браузер отменяет действие по умолчанию для всех элементов родителей, потому что именно клик вверх по DOM-у то поднимется (словить скриптом можно). IE , разрешает всему дереву DOM запускать действие по умолчанию, даже если его потомок уже что-то сделал, и мне это поведение кажется более правильным.

То есть если input, будет в ссылке (<a>), то при нажатии на input, переход по ссылке не произойдет (везде кроме как IE). Если например label засунуть в ссылку, то при клике, также не произойдет переход, будет только передаваться фокус на форму.

[hedgehog]

Justnewone, что варварского в том чтобы при установке галки, просто произошел переход по ссылке (ну и галка естественно поставилась) ?

в том, что пользователь не ожидает такого подвоха. по-моему это не очень хорошая практика

[maasja]

hedgehog, а если это фильтр в интернет магазине?

[rash]

hedgehog, а если это фильтр в интернет магазине?

Тогда следует оформить это так, чтобы было понятно, что будет переход по ссылке.

Очень сомневаюсь, что ставя флажок пользователь собирается перейти на другую страницу, это должно происходить по нажатии на ссылку и ни на что другое (ну, иногда на кнопку допустимо).

[Saturn]

hedgehog, а если это фильтр в интернет магазине?

Я представляю такие фильтры по ссылкам.(еще такого маразма не видел)

Если нормальный фильтр делать тогда не только JS нужно но еще и Ajax.

[hedgehog]

hedgehog, а если это фильтр в интернет магазине?

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

[maasja]

В плане фильтров и удобства, у меня будет все отлично, лучше чем где либо я и Вы видели. Все придумано до мелочей, полнейший AJAX, и практически моментальная загрузка всего.

Но сайт также полностью сохраняет свою работоспособность с полностью отключенным JS.

И сайт оптимизирован на столько, что даже с отключенным JS (читай AJAX), момента перезагрузки страницы (мигания) не видно вообще (раньше, я даже не думал что это возможно).

И что в моем случае не правильно? Стоит галка, а сбоку от нее текст. Когда наводишь на галку, текст что сбоку меняет свой цвет (то есть интуитивно понятно, понятней некуда), кликаешь ты на тексте справа, или на галку, должно произойти одно и тоже - поставится галка, примениться фильтр, и загрузится соответственный результат.