2013-12-21 3 views
-1
<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $("input").click(function(){ 
      $("p").toggle(500); 
      }); 
     }); 

     </script> 
    </head> 
    <body> 
     <label class="checkbox"> 
      <input type="checkbox" id="checkbox" name="checkbox" value="ON"/> Secure E-mail 
     </label> 

     <p>This is another small paragraph.</p> 
    </body> 

</html> 

Здесь текст, который я хочу переключить, уже будет показан.Текст Переключить в HTML по jQuery

Мое требование, только Когда я устанавливаю флажок, появляется текст. В противном случае он должен оставаться скрытым Помощь!

-Спасибо

+0

Вы также можете использовать http://jsfiddle.net/ для обмена кодом – Azd325

+0

Попробуйте [this .......] (http://jsfiddle.net/mqb93/) –

+0

дубликат из http://stackoverflow.com/questions/3642993/jquery-on-checked-toggle-box –

ответ

2

Установка дисплея по умолчанию элемента никому: p{display:none;}

Кроме того, убедитесь, чтобы только переключить один элемент вам нужно, вместо всех <p> элементов

пример

код здесь : http://jsfiddle.net/JXpg4/

+0

Я бы изменил принятый ответ для одного из @Arun P Johny. Это намного лучше из-за запоминания формы браузерами (так что он будет работать неправильно, невидимый при проверке). –

+0

Кроме того, @Jervelund у вас есть специальное место для javascript на js скрипке, и вы можете использовать библиотеку и документ, готовые из dropdownboxes. –

1

Один из способов обработки состояния по умолчанию - инициировать событие изменения вручную после регистрации обработчика, так что начальное состояние элемента будет установить

$(document).ready(function() { 
    $("input").change(function() { 
     $("p").toggle(this.checked); 
    }).change(); 
}); 

Демо: Fiddle

+0

это лучше, потому что он будет работать, например, в FF при обновлении. FF запоминает уже введенные данные, поэтому его можно выбрать по умолчанию –

+0

Я не был бы уверен в совместимости кросс-браузеров. используйте '$ (this) .prop ('checked')' вместо 'this.checked' –

+1

@MaciejPaprocki' this.checked' совместим с кросс-браузером ... –

0

Вы можете попробовать это,

$(document).ready(function(){ 
     $('p').hide(); 
     $("input[type='checkbox']").click(function(){ 
     $("p").toggle(); 
     }); 
    }); 

http://jsfiddle.net/rGyRW/1/

-1

проверьте, пожалуйста, свою работу, вам нужно добавить р {дисплей: нет}

+0

также стили и ошибки ужасны, к сожалению stackoverflow, не позволяет мне редактировать его :( –

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