Make HTML элементы формы появляются (JQuery или JS)

Question

Я интересно, если библиотека JQuery или JS существует, что делает следующее:

Основываясь на том, что пользователь вводит в A01, убедитесь, что значение, и если это значение равно «x», сделать A01_1 видимым. Если нет, ничего не делайте.

<form id="survey"> 
    <fieldset> 
      <label for="A01">A01</label> 
      <input type="number" name="A01" id="A01" min="0" max="5" > 

      <label for="A01_1">A01_1</label> 
      <input type="text" name="A01_1" id="A01_1" > 

Я предполагаю, что я ищу какой-то функции проверки рядный, что сделает другой элемент видимым, если он соответствует определенный вклад. Мне нужно применить это в разных местах, поэтому я хочу сделать его функцией многократного использования.

Мои навыки JS ограничены, поэтому любая помощь (с чего начать и т.д.) очень ценится.

Answer 1

$('input[name=A01]').on('keyup', function() { 

    var val = $.trim(this.value), 
     x = 'your_custom_value', 
     id = this.id, 
     target = $('label[for='+ id +'_1], input[name='+ id +'_1]'); 

    target.hide(); 

    if(val == x) { 
    target.show(); 
    } 
}); 

Для повторного использования вы можете изменить вы разметить как:

<form id="survey"> 
    <fieldset> 
      <label for="A01">A01</label> 
      <input type="number" name="A01" id="A01" min="0" max="5" class="myinput"> 

      <label for="A01_1">A01_1</label> 
      <input type="text" name="A01_1" id="A01_1" > 

      <label for="A02">A02</label> 
      <input type="number" name="A02" id="A02" min="0" max="5" class="myinput"> 

      <label for="A02_1">A02_1</label> 
      <input type="text" name="A02_1" id="A02_1" > 
    </fieldset> 
</form> 

И изменить JQuery как:

$('input.myinput').on('keyup', function() { 

    var val = $.trim(this.value), 
     x = 'your_custom_value', 
     id = this.id, 
     target = $('label[for^='+ id +'_], input[name='+ id +'_]'); 

    target.hide(); 

    if(val == x) { 
    target.show(); 
    } 
}); 

Answer 2

<script type="text/javascript"> 
function checkField(field) 
{ 
    if(field.value == 'VALUE') 
     document.getElementById('A01_1').style.display = 'true'; 
} 
</script> 

<input type="number" name="A01" id="A01" min="0" max="5" onchange="checkField(this)"> 

Затем примените стиль отображения: нет к элементу, который вы хотите скрыть

Answer 3

попробовать это:

HTML:

<form id="survey"> 
    <fieldset> 
      <label for="A01">A01</label> 
      <input data-relation="a01check" type="number" class="checkerinput" name="A01" id="A01" min="0" max="5" > 

      <label class="noshow a01check" for="A01_1">A01_1</label> 
      <input class="noshow a01check" type="text" name="A01_1" id="A01_1" > 
    </fieldset> 
</form>  

JS:

(function(undefined) { 

    var equalCheck = 3, $form = $('#survey'); 

    $form.find('input.checkerinput').bind('keyup change', function(event) { 

     var value = parseInt($(this).val(), 10); 
     if (!isNaN(value) && value == equalCheck){ 
      var relation = $(this).data('relation'); 
      if (relation != undefined) { 
       $form.find('.' + relation).removeClass('noshow'); 
      } 
     } 
    }); 

})();​ 
    ​ 

CSS:

.noshow{ 
    display:none; 
}​ 

example