Откомменченное

2009 19 января

Show\hide в формах (checkbox && Jquery)

Show hide в формах checkbox  JqueryБанальнейшая вещь в своей приятности - по клику на элемент показать\скрыть содержимое определенного блока. Понадобилось мне сделать такую полезность для большой формы - при отмеченном checkbox дать пользователю возможность выбора определенных параметров. Собственно решение ниже. Понадобится дополнительное включение jquery, весь же остальной код приведен ниже.
1
23
45
67
89
1011
1213
1415
16
$(document).ready(function(){
        //по умолчанию скрываем DIV        $("#tblview").css("display","none");
        // добавляем onclick на checkbox w/id param        $("#param").click(function(){
                // If checked                if ($("#param").is(":checked"))
                {                        //показываем скрытый слой
                        $("#tblview").show("fast");                } else {
                        //скрываем его                        $("#tblview").hide("fast");
                }        });
});
1
23
4
<form>
<input id="param" type="checkbox" /><label for="param">показать скрытый элемент:</label></form>
<div id="tblview">Скрытое содержимое блока</div>
Пример работы

Комментарии

0 Дмитрий пишет нам 18.05.2009 03:01
Что то у меня не захотела работать.. А вот поставил jquery.event.drag-1.5.js и вроде заработало... А не знаешь, как сделать загрузку с помощью этого Ява внешней странички хтмл на подобии лайтбокса? (На всякий случай у меня Джомла 1.5.10). Я просто хочу загружать карты для маиериала, а чисто для Джомлы такого компанента не нашел.. Вот и приходится открывать их в отдельном окне!!
Цитировать Сообщить модератору
0 Beliyadm отвечает 18.05.2009 03:10
делал несколько раз, вручную параметры к ссылке дописывал чтобы открывалось с JS эффектом
Цитировать Сообщить модератору
0 Андрей пишет нам 30.07.2009 02:03
Нет ли возможности подружить с mootools, которое открывает всплывающее окно (компонент eventlist) все работает с jquery-1.3.2.min.js - но не открываются всплывающие окна.. подгружаемые скрипты: // include the recurrence script $doc->addScript($url.'components/com_ev entlist/assets/js/jquery-1.3.2.min.js'); $doc-> ;addScript($url.'components/com_eventlist/assets/j s/recurrence.js'); // include the unlimited script $doc->addScript($url.'components/com_ev entlist/assets/js/unlimited.js');
Цитировать Сообщить модератору
0 Beliyadm отвечает 30.07.2009 02:08
Возможно проблема с версией jquery (и тем более сжатая версия может не иметь нужных функций) Как указанные скрипты могут конфликтовать друг с другом и\или с приведенным кодом - не знаю И по поводу mootools тоже не могу ничего сказать, уверен что там есть аналогичная функция, надо только найти путем чтения документации и гугля
Цитировать Сообщить модератору
0 Наталья пишет нам 08.12.2009 22:56
Попробовала - не получилось. Очень нужен этот эффект, так как большая форма ввода и часть полей можно не показывать, пока не будет отмечен один чекбокс. Но не поняла, почему не вышло. Вроде все довольно просто и логично. При нажатии на чекбокс есть подергивание экрана, но и все.
Цитировать Сообщить модератору
0 Beliyadm отвечает 08.12.2009 23:55
Увы голословно затрудняюсь ответить и решить проблему. Посмотрите исходный текст приведенного примера по ссылке в конце поста - там в принципе достаточно наглядно. Jquery подключен? Версия не старая? firebug показывает какие-нибудь ошибки?
Цитировать Сообщить модератору
0 Наталья пишет нам 09.12.2009 16:53
спасибо. получилось. просто блок, который show-hide был внутри таблицы. вынесла в отдельную и все стало нормально.
Цитировать Сообщить модератору
0 booka пишет нам 28.03.2010 01:44
Здесь css.id чекбокса и дива жестко определены? Почему-то при их смене не работает, а мне надо N-чекбоксов с хайдами...
Цитировать Сообщить модератору
0 booka отвечает 28.03.2010 01:56
натупил, простите
Цитировать Сообщить модератору
0 fedya пишет нам 14.04.2010 03:25
вот еще тоже ниче чекбоксы http://prootime.ru/beauty-checkboxes хотя с картинками, но можно в принципе без картинок легко...
Цитировать Сообщить модератору

Оставить коммент

Защитный код
Обновить

Откомменченное