Javascript-форум - спрятать/показать поле ввода при нажатии на checkbox

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - спрятать/показать поле ввода при нажатии на checkbox (https://javascript.ru/forum/dom-window/8759-spryatat-pokazat-pole-vvoda-pri-nazhatii-na-checkbox.html)

g1r	11.04.2010 19:01

спрятать/показать поле ввода при нажатии на checkbox

Ребят, подкскажите пожалуйста код скрипта, который бы при нажатии на поле формы типа checkbox, скрывал/показывал поле типа text в зависимости от состояния checkbox? (когда checkbox нажат поле ввода появляется и наоборот).

Заранее спасибо!

parzh-junior

11.04.2010 19:16

Попробуй к checkbox добавить 'onClick'

<input type=checkbox onClick="hideOrShowText()">

...и сделай скрипт (с названием hideOrShowText), который бы показывал/скрывал текст.
Я всегда делаю так. Это не очень профессионально, но всё-же, всё-же...

g1r	11.04.2010 19:27

Спасибо!

Вот мой вариант

<body>

<script type="text/javascript">

function showMe (box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById('div1').style.display = vis;
}

</script>

show/hide: <input type="checkbox" name="multi_note" value="1" onclick="showMe(this)">

<div id="div1" style="display:block; display:none;">
<input type=text>
</div>

</body>

g1r	11.04.2010 19:44

Всем спасибо! Кому нужно - пользуйтесь на здоровье!

Gozar

11.04.2010 20:05

Цитата:

Сообщение от g1r (Сообщение 51179)

Всем спасибо! Кому нужно - пользуйтесь на здоровье!

никому не нужно, для того чтобы делать так мало, не нужно так много кода.

Gozar

11.04.2010 20:08

все можно было и в onclick запихнуть

Aetae

11.04.2010 21:12

..т.е примерно так:

<input type="checkbox" checked="checked" onclick="this.nextSibling.style.display=this.checked?'':'none';"><input type="text">

Ничего, понимание должно придти, вы по крайней мере сделали всё сам, что уже гуд.)

P.S. А ещё лучше, чтоб проблем с вёрсткой не было, использовать visibility:hidden;

Kolyaj

11.04.2010 22:17

Цитата:

Сообщение от Aetae

P.S. А ещё лучше, чтоб проблем с вёрсткой не было, использовать visibility:hidden;

Тут уж по ситуации, смотря что нужно.

zerojava

29.05.2011 14:51

Подскажите пожалуйста а как сделать так чтобы при снятии галочки с чекбокса значения элементов ввода не просто скрывались в невидимом <div> но и еще обнулялись или блокировались?

trikadin

30.05.2011 01:40

Это просто вариант господина Aetae, но с добавлениями. Мне кажется, это было очевидно...

<input type="checkbox" checked="checked" onclick="if(this.checked){this.nextSibling.style.display=''}else {this.nextSibling.style.display='none';  this.nextSibling.value='';}"><input type="text">

NAMAT

26.09.2011 03:13

<input type="checkbox" checked="checked" onclick="if(this.checked){this.nextSibling.style.display=''}else {this.nextSibling.style.display='none';  this.nextSibling.value='';}"><input type="text" placeholder="Название турнира">

как в этом коде зделать штобы галочка изночально не стояла а при постановке галочки поевлялось поле

yashka525

26.09.2011 06:12

<input type="checkbox"  onclick="if(this.checked){document.getElementById('nextSibling').style.display='inline-block'}else {document.getElementById('nextSibling').style.display='none';  document.getElementById('nextSibling').value='';}">
<input type="text" placeholder="Название турнира" style="display: none;" id="nextSibling">

NAMAT

26.09.2011 08:19

Цитата:

Сообщение от yashka525 (Сообщение 128077)

<input type="checkbox"  onclick="if(this.checked){document.getElementById('nextSibling').style.display='inline-block'}else {document.getElementById('nextSibling').style.display='none';  document.getElementById('nextSibling').value='';}">
<input type="text" placeholder="Название турнира" style="display: none;" id="nextSibling">

спасибо

yashka525

26.09.2011 08:22

;) Не за что, я бы сделал отдельную функцию как описывалось ранее, и onclick бы выполнял функцию. Но это уже дело привычки, как кому удобно.

NAMAT

26.09.2011 08:27

Fatal error: Smarty error: [in W:\html\home-cs.lc\www/plugins/clans/templates/skin/default/actions/ActionClans/wars_create.tpl line 45]: syntax error: unrecognized tag: document.getElementById('nextSibling').style.display='inline-block' (Smarty_Compiler.class.php, line 446) in W:\html\home-cs.lc\www\engine\lib\external\Smarty-2.6.19\libs\Smarty.class.php on line 1092

мне вот такую ошибку выдает при открывании станицы с данным кодом

на этот код

<input type="checkbox" checked="checked" onclick="if(this.checked){this.nextSibling.style.display=''}else {this.nextSibling.style.display='none';  this.nextSibling.value='';}"><input type="text" placeholder="Название турнира">

он не ругался вабше

NAMAT

26.09.2011 08:56

а все поченил сам =)

BLP	14.10.2012 19:24

А подскажите, плз, как сделать так, чтобы когда чекбокснул - скрывалось (открывалось) не одно поле, а несколько...

lord2kim

14.10.2012 20:02

BLP, засуньте эти несколько полей в span или div и скрывайте (открывайте) уже его...

BLP	14.10.2012 22:01

Я уже сделал... Не знаю, насколько ЭТО красиво, может можно было проще.... Просто перечислил все поля в вышеприведенном здесь коде и всё работает:

<input type="checkbox"  onclick="if(this.checked){document.getElementById('Sex').style.display='none'; 
               document.getElementById('PB2001').style.display='none';
               document.getElementById('PN2001').style.display='none';
               document.getElementById('PB').style.display='none';
               document.getElementById('PN').style.display='none';
               document.getElementById('dd').style.display='none';
               document.getElementById('mm').style.display='none';
               document.getElementById('yy').style.display='none';
               }
               else {document.getElementById('Sex').style.display='inline-block';
               document.getElementById('PB2001').style.display='inline-block';
               document.getElementById('PN2001').style.display='inline-block';
               document.getElementById('PB').style.display='inline-block';
               document.getElementById('PN').style.display='inline-block';
               document.getElementById('dd').style.display='inline-block';
               document.getElementById('mm').style.display='inline-block';
               document.getElementById('yy').style.display='inline-block';
               }
               " />

У меня идет проверка через js файл на предмет, заполнено поле или нет... вот так (часть кода) :

if (document.entry_form.PB2001.value == "?") {
    utils.addClassName(f34, 'error');
  } else {  
    utils.addClassName(f34, 'ok');
  }

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

lord2kim

14.10.2012 23:16

BLP,

<html>
<head>
<script>
function func() {
    if (document.getElementById("cbx").checked) {
        if (document.getElementById("txt1").value == "" || document.getElementById("txt2").value == "") {
            return alert("незаполнено");
        }
        document.getElementById("form").submit();
    }
    else {
        document.getElementById("form").submit();
    }
}
</script>
</head>
<body>
<form action="http://javascript.ru" id="form">
<input type="checkbox" id="cbx" onClick="this.checked ? document.getElementById('div').style.display='block' : document.getElementById('div').style.display='none'">
<div style="display:none;" id="div">
<textarea id="txt1"></textarea><textarea id="txt2"></textarea>
</div>
<input type="button" value="Отправить" onClick="func()">
</form>
</body>
</html>

BLP	15.10.2012 00:06

Спасибо, конечно, так лучше, и надеюсь - правильнее )))

sotik

01.10.2013 18:46

подскажите,как можно выявить индекс нажатого чекбокса без применения id?

function change(checkbox){
alert(checkbox.indexOf);
}
<input type="checkbox" onChange="change(this)" />диезов<br>
<input type="checkbox" />бемолей

как я сделал,выдает ундефинет.

рони	01.10.2013 19:34

sotik,
:cray:

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
 <script>
  function change(checkbox){
    var a = document.querySelectorAll("input[type=checkbox]");
    for (var i=0; i<a.length; i++)  {if(a[i] == checkbox) return i}
    return -1
}
</script>

<input type="checkbox" onclick="alert(change(this))"/>диезов<br>
<input type="checkbox" onclick="alert(change(this))"/>бемолей

</body>

</html>

sotik

01.10.2013 21:33

Спасибо

Авас	16.10.2013 21:22

Цитата:

Сообщение от yashka525 (Сообщение 128077)

<input type="checkbox"  onclick="if(this.checked){document.getElementById('nextSibling').style.display='inline-block'}else {document.getElementById('nextSibling').style.display='none';  document.getElementById('nextSibling').value='';}">
<input type="text" placeholder="Название турнира" style="display: none;" id="nextSibling">

Спасибо! Воспользовался!

CyberIvan

15.06.2017 20:10

Цитата:

Сообщение от lord2kim (Сообщение 210083)

BLP,

<html>
<head>
<script>
function func() {
    if (document.getElementById("cbx").checked) {
        if (document.getElementById("txt1").value == "" || document.getElementById("txt2").value == "") {
            return alert("незаполнено");
        }
        document.getElementById("form").submit();
    }
    else {
        document.getElementById("form").submit();
    }
}
</script>
</head>
<body>
<form action="http://javascript.ru" id="form">
<input type="checkbox" id="cbx" onClick="this.checked ? document.getElementById('div').style.display='block' : document.getElementById('div').style.display='none'">
<div style="display:none;" id="div">
<textarea id="txt1"></textarea><textarea id="txt2"></textarea>
</div>
<input type="button" value="Отправить" onClick="func()">
</form>
</body>
</html>

lord2kim, Извините за глупый вопрос.
А как в таком случае сделать, чтобы поля в блоке div вместо display: none; становились неактивными (disabled) и их содержимое очищалось (value="") ?

То есть при нажатии на галочку поля в блоке div становятся неактивными, и, если они были заполнены - очищаются

P.S: Извините. Просто не очень разбираюсь в JS

j0hnik

15.06.2017 20:46

<html>
<head>
</head>
<body>
	<form action="http://javascript.ru" id="form">
		<input type="checkbox" id="cbx">
		<div  id="div">
			<textarea id="txt1" disabled></textarea><textarea id="txt2" disabled></textarea>
		</div>
		<input type="button" value="Отправить" onClick="func()">
	</form>
	<script>
		function func() {
			if (document.getElementById("cbx").checked) {
				if (document.getElementById("txt1").value == "" || document.getElementById("txt2").value == "") {
					return alert("незаполнено");
				}
				document.getElementById("form").submit();
			}
			else {
				document.getElementById("form").submit();
			}
		}
		document.getElementById("cbx").addEventListener("change", function(e) {	
			document.getElementById('txt1').value ='';
			document.getElementById('txt2').value ='';
			document.getElementById('txt1').disabled=!this.checked;
			document.getElementById('txt2').disabled=!this.checked;
		});
	</script>
</body>
</html>

timko_ya

15.12.2017 22:51

С помощью данного скрипта, скрываются и показываются только два поля: Время публикации: дд.мм.гггг чч:мм, и ID комментария 123 *, а остальные почему то не реагируют.

<form id="anonimus" name="anonimus" value="anonimus" method="POST" action="">
<div class="row uniform">
<div class="6u 12u(medium)">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Опубликовать как запись</label>
</div>
<div class="6u 12u(medium)">
<input type="checkbox" id="demo-human" name="demo-human">
<label for="demo-human">Опубликовать как комментарий</label>
</div>
</div>
<div class="row uniform">
<div class="6u 12u(xsmall)">
<input type="text" name="token" id="token" placeholder="Ваш токен: 1a2b3c4d5e6f7g8h9l0m *" disabled />
</div>
<div class="6u 12u(xsmall)">
<input type="text" name="data_2" id="data_2" placeholder="Время публикации: дд.мм.гггг чч:мм" disabled />
</div>
<div class="6u 12u(xsmall)">
<input type="text" name="owner_id" id="owner_id" placeholder="ID пользователя: 123456789 *" disabled />
</div>
<div class="6u 12u(xsmall)">
<input type="text" name="komment" id="komment" placeholder="ID комментария 123 *" disabled />
</div>
<div class="12u">
<input type="text" name="attachments" id="attachments" placeholder="Ваше вложение: photo123456789_123456789" disabled />
</div>
</div>
<div class="row uniform">
<div class="6u 12u(xsmall)">
<textarea name="message" id="message" placeholder="Ваше сообщение *" rows="6" disabled ></textarea>
</div>
<div class="6u 12u(xsmall)" align="center"><p>Цифровой код в нижнем регистре</p>
<img src="site_captcha/captcha_an.php" id="captcha_an" class="captcha_an" onclick="document.getElementById('captcha_an').src = 'site_captcha/captcha_an.php?' + Math.random()" alt="Цифровой код"/>
</div>
</div>
<div class="row uniform">
<div class="6u 12u(xsmall)">
<input type ="text" name="captcha_an" placeholder="Цифровой код *" id="captcha_vk" disabled />
</div>
<div class="6u 12u(xsmall)">
    <input type="text" name="protection" id="protection" placeholder="Антиспам. Не заполнять!"/>
</div>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="button special" value="Отправить" /></li>
<li><input type="reset" class="button" value="Отмена" /></li>
</ul>
</div>
</div>
</form>

<script type="text/javascript">
document.getElementById("demo-copy").addEventListener("change", function(e) {
document.getElementById("token").value ='';
document.getElementById("data_2").value ='';
document.getElementById("owner_id").value ='';
document.getElementById("komment").value ='';
document.getElementById("attachments").value ='';
document.getElementById("message").value ='';
document.getElementById("captcha_an").value ='';
document.getElementById("token").disabled=!this.checked;
document.getElementById("data_2").disabled=!this.checked;
document.getElementById("owner_id").disabled=!this.checked;
document.getElementById("komment").disabled=!this.checked;
document.getElementById("attachments").disabled=!this.checked;
document.getElementById("message").disabled=!this.checked;
document.getElementById("captcha_an").disabled=!this.checked;
});
</script>

рони	15.12.2017 23:43

timko_ya,
и?

timko_ya

16.12.2017 00:04

Блин, про вопрос забыл, из данного кода, скрывается только 2 поля, это Время публикации: дд.мм.гггг чч:мм, и ID комментария 123 *, а остальные почему то не реагируют.

timko_ya

16.12.2017 00:06

рони, Блин, про вопрос забыл, из данного кода, скрывается только 2 поля, это Время публикации: дд.мм.гггг чч:мм, и ID комментария 123 *, а остальные почему то не реагируют.

рони	16.12.2017 00:13

timko_ya,
что не так?

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

</head>

<body>
<form id="anonimus" name="anonimus" value="anonimus" method="POST" action="">
<div class="row uniform">
<div class="6u 12u(medium)">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Опубликовать как запись</label>
</div>
<div class="6u 12u(medium)">
<input type="checkbox" id="demo-human" name="demo-human">
<label for="demo-human">Опубликовать как комментарий</label>
</div>
</div>
<div class="row uniform">
<div class="6u 12u(xsmall)">
<input type="text" name="token" id="token" placeholder="Ваш токен: 1a2b3c4d5e6f7g8h9l0m *" disabled />
</div>
<div class="6u 12u(xsmall)">
<input type="text" name="data_2" id="data_2" placeholder="Время публикации: дд.мм.гггг чч:мм" disabled />
</div>
<div class="6u 12u(xsmall)">
<input type="text" name="owner_id" id="owner_id" placeholder="ID пользователя: 123456789 *" disabled />
</div>
<div class="6u 12u(xsmall)">
<input type="text" name="komment" id="komment" placeholder="ID комментария 123 *" disabled />
</div>
<div class="12u">
<input type="text" name="attachments" id="attachments" placeholder="Ваше вложение: photo123456789_123456789" disabled />
</div>
</div>
<div class="row uniform">
<div class="6u 12u(xsmall)">
<textarea name="message" id="message" placeholder="Ваше сообщение *" rows="6" disabled ></textarea>
</div>
<div class="6u 12u(xsmall)" align="center"><p>Цифровой код в нижнем регистре</p>
<img src="site_captcha/captcha_an.php" id="captcha_an" class="captcha_an" onclick="document.getElementById('captcha_an').src = 'site_captcha/captcha_an.php?' + Math.random()" alt="Цифровой код"/>
</div>
</div>
<div class="row uniform">
<div class="6u 12u(xsmall)">
<input type ="text" name="captcha_an" placeholder="Цифровой код *" id="captcha_vk" disabled />
</div>
<div class="6u 12u(xsmall)">
    <input type="text" name="protection" id="protection" placeholder="Антиспам. Не заполнять!"/>
</div>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="button special" value="Отправить" /></li>
<li><input type="reset" class="button" value="Отмена" /></li>
</ul>
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("demo-copy").addEventListener("change", function(e) {
document.getElementById("token").value ='';
document.getElementById("data_2").value ='';
document.getElementById("owner_id").value ='';
document.getElementById("komment").value ='';
document.getElementById("attachments").value ='';
document.getElementById("message").value ='';
document.getElementById("captcha_an").value ='';
document.getElementById("token").disabled=!this.checked;
document.getElementById("data_2").disabled=!this.checked;
document.getElementById("owner_id").disabled=!this.checked;
document.getElementById("komment").disabled=!this.checked;
document.getElementById("attachments").disabled=!this.checked;
document.getElementById("message").disabled=!this.checked;
document.getElementById("captcha_an").disabled=!this.checked;
});
</script>

</body>
</html>

timko_ya

16.12.2017 00:16

рони,
На моем сайте эта конструкция не работает, почему-то (. Да и здесь, поле Цифровой код не раскрывается

рони	16.12.2017 00:27

Цитата:

Сообщение от timko_ya

код не раскрывается

Цитата:

Сообщение от рони

где это в скрипте?

timko_ya

16.12.2017 00:34

рони,
А все, изменил. Но закрываются и открывается те же инпуты

Часовой пояс GMT +3, время: 01:10.