Почему мой вход никогда не скрывается?

Я бы хотел показать вход (тип = электронная почта), если установлен флажок checkbox. Если его не проверить, я бы хотел скрыть это. Моя проблема заключается в том, что поле ввода всегда отображается.Почему мой вход никогда не скрывается?

JQuery:

$("#newsletterCheckbox").change(function() { 
    if ($(this).is(":checked")) { 
     $("#newsletterInputfield").show(); 
    } else { 
     $("#newsletterInputfield").hide(); 
    } 
});

HTML:

<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter 

... 

<div id="newsletterInputfield"> 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
</div>

Я попытался This и множество других примеров. Заранее спасибо.

источник

2014-10-03 minimen

А где ваша собственная Fiddle? Вероятно, он не смотрел на свою консоль и включил JavaScript перед HTML. – GuyT

Я установил [скрипку со своим кодом] (http://jsfiddle.net/jwqm9wxj/1/), и он отлично работает - я не вижу никаких проблем там. –

[Ваш код] (http://jsfiddle.net/xy0nadkp/), похоже, работает. Элемент скрыт, когда проверено состояние изменено на unchecked. Вы имеете в виду тот факт, что это показывает начало? Это связано с тем, что ваш код работает только в событии 'change', и при загрузке страницы никаких изменений не произошло. Если вы хотите, чтобы он был скрытым, вы должны скрыть его с помощью css. –

Я не уверен, правильно ли я прав.

Чтобы скрыть поле в Бегин добавить яваскрипта код:

$("#newsletterCheckbox").change(function() { 
    EmailTextboxVisibility(); 
}); 

function EmailTextboxVisibility(){ 
    if ($("#newsletterCheckbox").is(":checked")) { 
     $("#newsletterInputfield").show(); 
    } else { 
     $("#newsletterInputfield").hide(); 
    } 
} 

$(document).ready(function() { 
    EmailTextboxVisibility(); 
});

Это скроет ваш адрес электронной почты текстового поля на начаться, когда флажок не установлен.

здесь мой jsfiddle

источник

2014-10-03 08:04:46

Связанный с OP jsfiddle не был его - это был пример того, на что он смотрел, - и он работал правильно без каких-либо обновлений. –

Мой вопрос в том, почему мой код не работает, когда я его тестирую, но [здесь] (http://jsfiddle.net/xy0nadkp/) он работает – minimen

Извините, мой плохой. я обновил свой ответ. –

добавить style="display:none" к #newsletterInputfield

$("#newsletterCheckbox").change(function() { 
 
     if ($(this).is(":checked")) { 
 
      $("#newsletterInputfield").show(); 
 
     } else { 
 
      $("#newsletterInputfield").hide(); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter 
 

 
... 
 

 
<div id="newsletterInputfield" style="display:none"> 
 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
 
</div>

или изменить свой код этой

$("#newsletterInputfield").hide();/**add this*/ 
 
$("#newsletterCheckbox").change(function() { 
 
    if ($(this).is(":checked")) { 
 
     $("#newsletterInputfield").show(); 
 
    } else { 
 
     $("#newsletterInputfield").hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter 
 

 
... 
 

 
<div id="newsletterInputfield"> 
 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
 
</div>

источник

2014-10-03 08:13:34

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

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

Так что я бы изменить свою обертку DIC иметь дисплей ни один стиль:

<div id="newsletterInputfield" style="display:none">

скорее, чем это

<div id="newsletterInputfield">

Помимо этого, как вы ссылаетесь JQuery и что остальная часть вашей страницы похоже, может быть проблемой, но мы не можем видеть, что ...

источник

2014-10-03 08:17:42

Мое решение использует только CSS3 и HTML.

Нет необходимости в Javascript.

Идея состоит в том, чтобы использовать селектор :checked для стильного элемента, который вы хотите.

HTML-:

<input type="checkbox" id="foo" value="1" checked="checked"/> 
<div id="checked-a"> 
    Some content 
</div> 

<input type="email" id="hdn1" value="yes" />

Теперь в CSS:

#hdn1 { 
    display:none; 
} 

#foo:checked ~ #hdn1 { 
    display:inline !important; 
}

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

Проверьте здесь для примера, с переходами и display часть закомментирована: http://jsfiddle.net/d3aokkv7/2/

источник

2014-10-03 08:23:43

Html:

<input name="checkboxNewsletter" type="checkbox" id="newsletterCheckbox" />Newsletter... 

<div id="newsletterInputfield" style="display:none;"> 
    <input type="email" placeholder="Email*" id="email" class="inputFields" /> 
</div>

JQuery:

$("#newsletterCheckbox").change(function() { 
     $("#newsletterInputfield").toggle(); 
});

JsFiddle

источник

2014-10-03 08:26:32 Norrj

код был хорошо, просто нужно поместить все в document.ready:

**$(document).ready(function() {** 
     $("#newsletterCheckbox").change(function() { 
      ... 
     }); 
    **});**

Спасибо вам, ребята, за вашу помощь :)

источник

2014-10-03 08:28:36 minimen

Почему мой вход никогда не скрывается?

ответ

Смежные вопросы