Скрыть поля формы?

@andrepont · Регистрация: 27.04.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте. Сталкнулся с следующей задачей. В форме есть несколько полей одно из них с флажком. Необходимо сделать так чтобы при нажатии на флажок определённые поля скрывались.

@Skipy · 14.12.2011, 13:14

На OnClick вешаете обработчик, в котором получаете по id все элементы, которые надо скрыть, и у них в стиле выставляете display="none".

@andrepont · 14.12.2011, 20:52 **[ТС]**

Уважаемый Skipy я в JS не силён вот если бы какой нибудь пример был бы очень признателен.

@M128K145 · 16.12.2011, 02:29

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
    <head>
        <title>Test page</title>
    </head>
    <body>
        <form>
            <tr>
                <div id="textFieldBlock">
                    <label for="testTextfield">Test Label for textfield</label><br>
                    <input type="textfield" id="testTextField" value="Test TextField"/>
                </div>
            </tr>
            <tr>
                <div id="buttonBlock">
                    <input type="button" id="testButton" value="Test Button"/>
                </div>
            </tr>
            <tr>
                <input type="checkbox" id="hideTextField" onclick="changeVisibility('textFieldBlock', checked)"/>Hide TextField
                <input type="checkbox" id="hideButton" onclick="changeVisibility('buttonBlock', checked)"/>Hide Button
            </tr>
        </form>
        <script type="text/javascript" language="JavaScript">
            function changeVisibility(divId, visible){
                document.getElementById(divId).style.display = visible ? "none": "block";
            }
        </script>
    </body>
</html>

@andrepont · 16.12.2011, 21:17 **[ТС]**

Спасибо очень помог.

@andrepont · 27.02.2012, 19:09 **[ТС]**

Здравствуйте M128K145. Сделал все как вы сказали. Всё работает. Но столкнулся с следующей проблеммой. Уже при редактировании профиля когда поля уже заполнены, получается так что галочка стоит, а поля опять видны. Можно ли повешать обработчик не на OnClick. А именно если стоит галочка то поля скрыты.

@M128K145 · 27.02.2012, 19:32

HTML5
1
2
3
4
5
6
7
<script type="text/javascript" language="JavaScript">
    changeVisibility('textFieldBlock', document.getElementById('hideTextField').checked);
    changeVisibility('buttonBlock', document.getElementById('hideButton').checked);
    function changeVisibility(divId, visible){
        document.getElementById(divId).style.display = visible ? "none": "block";
}
</script>

@andrepont · 27.02.2012, 20:46 **[ТС]**

Прописал как вы сказали

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="new_opit_rab">
<input type="textfield" id="testTextField" value="Test TextField"/>
</div>
<input id="opit_rab" class="inputbox checkbox " type="checkbox" name="opit_rab" onclick="changeVisibility('new_opit_rab', checked)">
<script type="text/javascript" language="JavaScript">
changeVisibility('new_opit_rab', document.getElementById('opit_rab').checked);
function changeVisibility(divId, visible){
document.getElementById(divId).style.display = visible ? "none": "block";
}
</script>

но при редактировании та же картина галочка стоит а под ней поля не скрыты.

@M128K145 · 27.02.2012, 21:13

andrepont, а в какой момент времени чекбокс становится checked?

@andrepont · 27.02.2012, 21:32 **[ТС]**

Чекбокс становится checked после сохранения, т.е. при нажатии на флажок checked="" не появляется

HTML5
1
<input id="opit_rab" class="inputbox checkbox " type="checkbox" checked="" name="opit_rab[]" onclick="changeVisibility('new_opit_rab', checked)">

@andrepont · 29.02.2012, 20:43 **[ТС]**

А когда он должен становиться checked?

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 03.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@andrepont 0 / 0 / 0 Регистрация: 27.04.2011 Сообщений: 45

	Скрыть поля формы? 14.12.2011, 00:36. Показов 11246. Ответов 10 Метки нет (Все метки) Здравствуйте. Сталкнулся с следующей задачей. В форме есть несколько полей одно из них с флажком. Необходимо сделать так чтобы при нажатии на флажок определённые поля скрывались. 0

@Skipy 2000 / 1427 / 92 Регистрация: 25.11.2010 Сообщений: 3,611
	14.12.2011, 13:14
	На OnClick вешаете обработчик, в котором получаете по id все элементы, которые надо скрыть, и у них в стиле выставляете display="none". 0

@andrepont 0 / 0 / 0 Регистрация: 27.04.2011 Сообщений: 45
	14.12.2011, 20:52 [ТС]
	Уважаемый Skipy я в JS не силён вот если бы какой нибудь пример был бы очень признателен. 0

@andrepont 0 / 0 / 0 Регистрация: 27.04.2011 Сообщений: 45
	16.12.2011, 21:17 [ТС]
	Спасибо очень помог. 0

@andrepont 0 / 0 / 0 Регистрация: 27.04.2011 Сообщений: 45
	27.02.2012, 19:09 [ТС]
	Здравствуйте M128K145. Сделал все как вы сказали. Всё работает. Но столкнулся с следующей проблеммой. Уже при редактировании профиля когда поля уже заполнены, получается так что галочка стоит, а поля опять видны. Можно ли повешать обработчик не на OnClick. А именно если стоит галочка то поля скрыты. 0

@M128K145 8384 / 3617 / 419 Регистрация: 03.07.2009 Сообщений: 10,709
	27.02.2012, 21:13
	andrepont, а в какой момент времени чекбокс становится checked? 0

@andrepont 0 / 0 / 0 Регистрация: 27.04.2011 Сообщений: 45
	29.02.2012, 20:43 [ТС]
	А когда он должен становиться checked? 0