Переключить видимость текстового поля на основе состояния флажка - JQuery - PullRequest
Новая
       19

Переключить видимость текстового поля на основе состояния флажка - JQuery

1 голос
/ 08 декабря 2010

Итак, у меня есть список рас для формы сюрвери.для тех людей, которые не соответствуют ни одному из других критериев, есть поле с именем «другие данные».Мне нужно, чтобы учебник стал видимым, когда отмечен пункт «другое указание», и исчез, когда его нет.Я был в состоянии заставить коробку появляться, когда другой отмечен, но не исчезать, когда он был снят.Любая помощь будет принята с благодарностью.Спасибо.

Jscript 

<script type="text/javascript" src="jquery.js">
 <script language="JavaScript">

 $(function(){ 
  $('#other').click(function(){ 
  $('#otherrace').toggle(
          function(event) {
            $(event.target).css('visible');
          },
          function(event) {
            $(event.target).css('hidden');
          }
        );
      });


    </script>

html 

<input type="checkbox" name="race"  id="other"value="other" />Other, specify<br />
<div style="visibility:hidden" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>

1 Ответ

2 голосов
/ 08 декабря 2010

Сделайте так:

Пример: http://jsfiddle.net/patrick_dw/K3kvE/

$('#other').change(function(){ 
    $('#otherrace').parent().css( 'visibility', this.checked ? 'visible' : 'hidden' );
});

или используйте display:none вместо visibility:hidden и сделайте следующее:

Пример: http://jsfiddle.net/patrick_dw/K3kvE/1/

$('#other').change(function(){ 
    $('#otherrace').parent().toggle( this.checked );
});

То, как вы использовали .toggle(), было «событием переключения», что означает, что вы фактически назначали событие щелчка, которое переключается между выполнением функций, которые вы передаете ему.

Поскольку это родитель otherrace, который скрыт, вам нужно перейти к нему, используя .parent(), а затем установить его свойство visibility в hidden или visible в зависимости от состояния флажка.

Второе решение меняется с использования свойства visibility на использование display, так что toggle() можно вызывать другим способом. То, как он вызывается сейчас, переключается между show() и hide(), которые устанавливают свойство display из none в исходное значение и обратно.

...